Use smooth transitions for hover effects

Author: GRA0007

components/BlogEntry/BlogEntry.module.scss

@@ -15,13 +15,13 @@
     background-size: 200% 100%;
     background-position-x: 100%;
     background-repeat: no-repeat;
-    transition-property: background-position-x;
-    transition-duration: .1s;
-    transition-timing-function: steps(3);
   }
   & span:last-of-type {
     text-decoration: underline;
   }
+  & span {
+    transition: background-position-x .15s, font-weight .15s, color .15s;
+  }
 
   &:hover, &:focus-visible {
     font-weight: 600;

components/ButtonLink/ButtonLink.module.scss

@@ -9,9 +9,13 @@
   text-decoration: underline;
   cursor: pointer;
   border-radius: .2em;
+  transition: transform .15s;
 
   &:focus-visible {
     outline: var(--focus-ring);
     outline-offset: .2em;
   }
+  &:hover, &:focus-visible {
+    transform: translateY(-.05em);
+  }
 }

components/DesignWork/DesignWork.module.scss

@@ -4,13 +4,16 @@
   align-items: center;
   text-decoration: none;
   position: relative;
+  transition: font-weight .15s, color .15s;
 
   &::after {
     content: '';
     position: absolute;
     inset: 0;
-    display: none;
+    display: block;
     background: rgba(0 0 0 / .6);
+    opacity: 0;
+    transition: opacity .15s;
   }
 
   span {
@@ -21,22 +24,26 @@
   svg {
     height: 3.5em;
     width: 3.5em;
+    stroke-width: 4;
+    transition: stroke-width .15s;
   }
 
   span, svg {
     position: relative;
     z-index: 1;
-    stroke-width: 4;
   }
 
   img {
     position: absolute;
     inset: 0;
     object-fit: cover;
-    display: none;
+    display: block;
     background-color: var(--background);
     height: 100%;
     width: 100%;
+    opacity: 0;
+    transform: translateX(-.3em);
+    transition: opacity .15s, transform .15s;
   }
 
   &:hover, &:focus-visible {
@@ -45,13 +52,14 @@
     outline: none;
 
     img {
-      display: block;
+      opacity: 1;
+      transform: translateX(0);
     }
     svg {
       stroke-width: 7;
     }
     &::after {
-      display: block;
+      opacity: 1;
     }
   }
 }

components/Project/Project.module.scss

@@ -1,5 +1,6 @@
 .project {
   text-decoration: none;
+  transition: transform .15s;
 
   img {
     border-radius: 1em;