Adds some animation to the case study cards

assets/css/site.css

@@ -891,6 +891,7 @@ section#studies {
         background-repeat: no-repeat;
         background-size: auto 30rem; /* mobile size */
         border: none;
+        transition: filter 200ms ease-in-out;
         --card-color: var(--blue);
 
         > a {
@@ -904,9 +905,22 @@ section#studies {
 
         h2 {
             font-size: 2rem;
-            padding-top: 0;
-            text-shadow: none;
             font-weight: 700;
+            display: inline-flex;
+            padding-top: 0;
+            position: relative;
+            text-shadow: none;
+
+            &::after {
+                content: "→";
+                display: block;
+                opacity: 0;
+                position: relative;
+                right: -0.5rem;
+                top: 2px;
+                transition: right 200ms ease-in-out, visibility 200ms ease-in-out, opacity 200ms ease-in-out;
+                visibility: invisible;
+            }
         }
 
         p:first-of-type {
@@ -945,6 +959,15 @@ section#studies {
             }
         }
 
+        &:hover
+        {
+            h2::after {
+                opacity: 100;
+                right: -1rem;
+                visibility: visible;
+            }
+        }
+
         &[color="blue"] {
             color: var(--white);