diff --git a/sass/main.scss b/sass/main.scss
index 444b519..5dce223 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -373,30 +373,55 @@ main {
column-gap: 1em;
row-gap: 1em;
- img:hover { box-shadow: 0px 1px 9px #00000088 }
+ img { display: block }
+ a:hover img { box-shadow: 0px 1px 9px #00000088 }
}
.gallery.index {
a {
position: relative;
color: #fff;
}
- .description {
+ .info {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
- padding: .7rem;
+ height: 100%;
+ max-height: 40%;
+ display: flex;
+ flex-direction: column;
+ padding: .7em;
background-color: rgba(46, 52, 64, 0.85);
text-align: left;
font-weight: normal;
font-size: .85rem;
+ transition: all .1s ease-out;
+
+ .description {
+ height: 0;
+ margin-top: 0.85em;
+ overflow: hidden;
+ opacity: 0;
+ transition: all .1s linear .1s;
+ }
.date {
- margin-top: .5em;
- text-align: right;
+ align-self: flex-end;
+ margin-top: auto;
+ font-size: .9em;
color: #ccc;
}
}
+ a:hover {
+ .info {
+ max-height: 100%;
+ padding-top: 1.5em;
+ }
+ .info .description {
+ height: auto;
+ opacity: 1;
+ }
+ }
}
.button {
diff --git a/templates/macros.html b/templates/macros.html
index c41105b..0c025a0 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -227,12 +227,13 @@
{% endfor %}
-