Zoom portraits on hover

😍✨𝒶𝓃𝒾𝓂𝒶𝓉𝒾ℴ𝓃𝓈✨😍

1 files changed, 8 insertions, 6 deletions

diff --git a/quatuor.css b/quatuor.css
index 45487c2..ca5b8c4 100644
--- a/quatuor.css
+++ b/quatuor.css
@@ -26,6 +26,12 @@ main #photos {
     position: relative;
     width: 6em;
     height: 100%;
+    border-color: #ddd;
+    border-width: 0.3em;
+    border-style: solid;
+    border-radius: 0.3em;
+    box-sizing: border-box;
+    overflow: hidden;
 }
 
 #photos a img {
@@ -34,17 +40,13 @@ main #photos {
     height: 100%;
     object-fit: cover;
     object-position: center;
-    border-color: #ddd;
-    border-width: 0.3em;
-    border-style: solid;
-    border-radius: 0.3em;
-    box-sizing: border-box;
     filter: grayscale(1);
-    transition: filter 1s;
+    transition: filter 1s, transform 1s;
 }
 
 #photos a img:hover {
     filter: none;
+    transform: scale(1.05);
 }
 
 #photos a:nth-of-type(1) {