Fix photo CSS and hover

src/style/molecules/_photo.scss

@@ -66,6 +66,12 @@
             border-radius: 8px;
         }
 
+        a {
+            display: block;
+            width: 100%;
+            text-decoration: none;
+        }
+
         img {
             display: block;
             width: 100%;
@@ -74,33 +80,26 @@
 
         // Overlay
         &:after {
+            opacity: 0;
             content: "";
             position: absolute;
-            z-index: 2;
-            opacity: 0;
-            pointer-events: none;
+            z-index: 3;
+            display: block;
             top: 0;
             left: 0;
             bottom: 0;
             right: 0;
             background-color: $color-primary;
-            display: block;
-            z-index: 3;
+            pointer-events: none;
             transition: opacity 150ms $ease-inout;
         }
 
-        a {
-            display: block;
-            width: 100%;
-            text-decoration: none;
+        // Hover
+        &:hover {
+            cursor: url(#{$dir-img}/icons/zoom.svg) 6 8, pointer;
 
-            // Hover
-            &:hover {
-                cursor: url(#{$dir-img}/icons/zoom.svg) 6 8, pointer;
-
-                .photo__image--img:after {
-                    opacity: 0.6;
-                }
+            &:after {
+                opacity: 0.6;
             }
         }
     }