Show image title on hover

2 files changed, 21 insertions, 0 deletions

diff --git a/src/index.html.mustache b/src/index.html.mustache
index ab614fc..5631fbd 100644
--- a/src/index.html.mustache
+++ b/src/index.html.mustache
@@ -29,6 +29,7 @@
                 {{#.}}

                 <a target="_blank" href="{{&src}}">

                     <img src="{{&src}}?nf_resize=fit&w=600" alt="{{title}}">

+                    <span class="title">{{title}}</span>

                 </a>

                 {{/.}}

                 {{/.}}

diff --git a/src/styles.css b/src/styles.css
index 38eb3ba..9e34f28 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -129,10 +129,30 @@ h3 {
 }

 

 .gallery .column a {

+    position: relative;

     margin-bottom: var(--grid-gap);

     min-width: min(400px, 100vw);

 }

 

+.gallery .column .title {

+    display: none;

+    position: absolute;

+    bottom: 0;

+    left: 0;

+    padding: 5px;

+    background-color: white;

+    font-size: 30px;

+    max-width: 70%;

+}

+

+.gallery .column a:hover .title {

+    display: initial;

+}

+

+.gallery .column a:hover img {

+    filter: sepia(0.6);

+}

+

 .gallery .column img {

     width: 100%;

 }