diff options
| -rw-r--r-- | src/index.html.mustache | 1 | ||||
| -rw-r--r-- | src/styles.css | 20 |
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%;
}
|