diff options
| author | Jan Tuomi <jans.tuomi@gmail.com> | 2022-07-14 22:06:04 +0300 |
|---|---|---|
| committer | Jan Tuomi <jans.tuomi@gmail.com> | 2022-07-14 22:06:04 +0300 |
| commit | 47a43f8cfca47daa18cb39c0c644b97d2234da84 (patch) | |
| tree | fff389a07c830b97c2b46f9fd1d2a134e04beb8c | |
| parent | 52a3d0a7fbaa37a462387802f6ff6b2e3fca2f40 (diff) | |
Show image title on hover
| -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%;
}
|