Add shine effect on photo hover.

chapter-three · Nov 7, 2024 · f903c0e · f903c0e
1 parent 9dcb99c
commit f903c0e
Showing 1 changed file with 31 additions and 0 deletions.
diff --git a/styles.css b/styles.css
@@ -563,6 +563,37 @@ img.star:hover {
   letter-spacing: -0.16px;
 }
 
+
+/* Shine */
+.circular--portrait::before {
+  position: absolute;
+  top: 0;
+  left: -75%;
+  z-index: 2;
+  display: block;
+  content: '';
+  width: 50%;
+  height: 100%;
+  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
+  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
+  -webkit-transform: skewX(-25deg);
+  transform: skewX(-25deg);
+}
+.circular--portrait:hover::before {
+  -webkit-animation: shine .75s;
+  animation: shine .75s;
+}
+@-webkit-keyframes shine {
+  100% {
+    left: 125%;
+  }
+}
+@keyframes shine {
+  100% {
+    left: 125%;
+  }
+}
+
 .scroll-section.connect .text-with-arrow {
   border-bottom: 1px solid rgba(37, 37, 37, 0.50);
   padding-bottom: 20px;