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 %}