From 267d90eb3e4a216e83b3a4d561afb1c6fb196f7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Forr=C3=B3?= <nikola@mraveniste.cc>
Date: Fri, 7 Sep 2018 15:18:00 +0200
Subject: [PATCH] Implement caption overlay

---
 llinstagram.css                          | 45 ++++++++++++++++++++++++
 templates/partials/llinstagram.html.twig |  3 +-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/llinstagram.css b/llinstagram.css
index 75b1895..969fbd2 100644
--- a/llinstagram.css
+++ b/llinstagram.css
@@ -11,4 +11,49 @@
 .instagram li {
     display: inline;
     width: 180px;
+    height: 180px;
+    margin-top: 0.8rem;
+}
+
+.instagram li a {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+.instagram li a img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: scale(1);
+    transition: all 1s;
+}
+
+.instagram li:hover a img {
+    transform: scale(1.05);
+}
+
+.instagram li a span {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    padding: 0.5rem;
+    font-size: 80%;
+    font-weight: 600;
+    color: #222;
+    background: rgba(243, 171, 0, 0.7);
+    text-align: center;
+    opacity: 0;
+    transform: translateY(-20px);
+    transition: all 0.3s;
+}
+
+.instagram li:hover a span {
+    transform: translateY(0px);
+    opacity: 1;
 }
diff --git a/templates/partials/llinstagram.html.twig b/templates/partials/llinstagram.html.twig
index e590dd3..d48df50 100644
--- a/templates/partials/llinstagram.html.twig
+++ b/templates/partials/llinstagram.html.twig
@@ -2,7 +2,8 @@
     {% for item in feed %}
         <li>
             <a href="https://www.instagram.com/p/{{ item.shortcode }}" target="_blank">
-                <img src="{{ item.display_url }}" title="{{ item.caption }}">
+                <img src="{{ item.display_url }}">
+                <span>{{ item.caption }}</span>
             </a>
         </li>
     {% endfor %}