Add animated figure captions

layout/work.html

@@ -4,11 +4,13 @@
 {% set all_selected = False if no_all_selected else True %}
 
 {% block main %}
-    <div class="sqr-item"><img src="{{ 'image/tile.jpg' | static }}" alt="Ejemplo"></div>
-    <div class="sqr-item"><img src="{{ 'image/tile.jpg' | static }}" alt="Ejemplo"></div>
-    <div class="sqr-item"><img src="{{ 'image/tile.jpg' | static }}" alt="Ejemplo"></div>
-    <div class="sqr-item"><img src="{{ 'image/tile.jpg' | static }}" alt="Ejemplo"></div>
-    <div class="sqr-item"><img src="{{ 'image/tile.jpg' | static }}" alt="Ejemplo"></div>
-    <div class="sqr-item"><img src="{{ 'image/tile.jpg' | static }}" alt="Ejemplo"></div>
-    <div class="sqr-item"><img src="{{ 'image/tile.jpg' | static }}" alt="Ejemplo"></div>
+{% for _ in range(15) %}
+	<figure class="v">
+		<img src="{{ 'image/tile.jpg' | static }}" alt="Ejemplo">
+		<figcaption>
+			<h2>Club De Jazz - 2019</h2>
+			poster
+		</figcaption>
+	</figure>
+{% endfor %}
 {% endblock %}

static/css/main.css

@@ -3,6 +3,7 @@
 	--columns: 5;
 	--tile-margin: .9vw;
 	--body-margin: 3.6vw;
+	--theme-color: #ff2d00;
 	/* --tile-margin: 12.75px; */
 	/* --body-margin: 66px; */
 	--header-inner-space: calc(8 * var(--tile-margin));
@@ -103,20 +104,14 @@ h2 {
 	text-decoration: none;
 	text-transform: uppercase;
 }
-h3 {
-	font-size: 20px;
-	font-family: 'nexa-light';
+figure figcaption {
+	font-size: .9em;
 }
-a.current, a[href]:hover {
+a.selected, a[href]:hover {
 	/* cursor: default; */
 	/* display: inline-block; */
-	color: #ff2d00;
-}
-
-a.selected {
-	color: #ff2d00;
+	color: var(--theme-color);
 }
-
 div {
 	display: flex;
 }
@@ -230,7 +225,7 @@ a.first {
 a.last {
 	margin-right: var(--tile-margin);
 }
-.main-content {
+main {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -240,16 +235,35 @@ a.last {
 	/* margin-top: calc(var(--header-space) + var(--body-margin)); */
 	position: static;
 }
-.sqr-item {
+figure {
+	position: relative;
 	display: flex;
 	width: calc(100% / var(--columns) - 2 * var(--tile-margin));
 	margin: var(--tile-margin);
 }
-.sqr-item img {
-	width: 100%;
-}
-.sqr-item svg {
+figure img {
+	display: flex;
 	width: 100%;
-	height: 100%;
-	background-color: #bbb9ba;
 }
+figure figcaption {
+	display: flex;
+	flex-direction: column;
+	position: absolute;
+	padding: calc(2 * var(--tile-margin));
+	background-color: var(--theme-color);
+	bottom: 0;
+	width: calc(100% - var(--tile-margin) * 4);
+	opacity: 0;
+	height: 0;
+}
+figure:hover figcaption {
+	opacity: 1;
+	transition: .3s ease;
+}
+figure.v:hover figcaption {
+	height: 21%;
+}
+figure.h:hover figcaption,
+figure.s:hover figcaption {
+	height: 30%;
+}