1 files changed, 31 insertions, 17 deletions

diff --git a/src/static/site6.css b/src/static/site6.css
index 9996da68..2ffb209d 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -718,15 +718,20 @@ ul.image-details li {
   margin-bottom: 1em;
 }
 
-a.box:focus {
-  outline: 3px double var(--primary-color);
+.image-link {
+  display: block;
+  overflow: hidden;
+}
+
+.image-link:focus {
+  outline: 3px double white;
 }
 
-a.box:focus:not(:focus-visible) {
+.image-link:focus:not(:focus-visible) {
   outline: none;
 }
 
-a.box .image {
+.image-link .image {
   display: block;
   max-width: 100%;
   height: auto;
@@ -1088,18 +1093,19 @@ h1 a[href="#additional-names-box"]:hover {
   text-shadow: 0 2px 5px rgba(0, 0, 0, 0.75);
 }
 
-.image-inner-area {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
+.image-link {
   border-bottom: 1px solid #ffffff03;
   border-radius: 2.5px;
   box-shadow:
     0 1px 8px -3px var(--bg-black-color);
 }
 
+.image-inner-area {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
 img {
   object-fit: cover;
 }
@@ -1108,6 +1114,7 @@ img {
   content: "";
   display: block;
   position: absolute;
+  pointer-events: none;
   top: 0;
   left: 0;
   right: 0;
@@ -1193,27 +1200,34 @@ img.pixelate {
   display: none;
 }
 
-.reveal:not(.revealed) .image-inner-area {
-  background: var(--deep-color);
-
+.reveal:not(.revealed) .image-container > .image-link,
+.reveal:not(.revealed) .image-container > .image-inner-area {
   box-sizing: border-box;
   border: 1px dotted var(--primary-color);
   border-radius: 6px;
+  overflow: hidden;
 }
 
-.reveal .image-inner-area:hover .reveal-interaction {
-  text-decoration-style: solid;
+.reveal:not(.revealed) .image-inner-area {
+  background: var(--deep-color);
 }
 
-.reveal:not(.revealed) .image-inner-area:hover {
+.reveal:not(.revealed) .image-container > .image-link:hover,
+.reveal:not(.revealed) .image-container > .image-inner-area:hover {
   border-style: solid;
 }
 
-.reveal:not(.revealed) .image-inner-area:hover .image {
+.reveal:not(.revealed) .image-container > .image-link:hover .image,
+.reveal:not(.revealed) .image-container > .image-inner-area:hover .image {
   filter: blur(20px) brightness(0.6);
   opacity: 0.6;
 }
 
+.reveal:not(.revealed) .image-container > .image-link:hover .reveal-interaction,
+.reveal:not(.revealed) .image-container > .image-inner-area:hover .reveal-interaction {
+  text-decoration-style: solid;
+}
+
 .image-link:not(.no-image-preview) .image-container {
   background: var(--deep-color);
   box-shadow: none;