Zobrazení informací o galerii při :hover

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 {

templates/macros.html

@@ -227,12 +227,13 @@
 				{% endfor %}
 				<img src="{{ resize_image(path=img, width=300, height=200, op="fill") }}" alt="{{ gallery.title }}">
 
-				<div class="description">
+				<div class="info">
+					<div class="title">{{ gallery.title }}</div>
+
 					{% if gallery.description %}
-						{{ gallery.description }}
-					{% else %}
-						{{ gallery.title }}
+						<div class="description">{{ gallery.description }}</div>
 					{% endif %}
+
 					<div class="date">2021-05-02</div>
 				</div>
 			</a>