From ea3846e33b5495dd34c65928900a81192aabb045 Mon Sep 17 00:00:00 2001 From: Anonymous Contributor Date: Tue, 12 Sep 2023 08:19:29 +0200 Subject: [PATCH] Replace Animated Image with own, pure CSS impl. --- css/animated-image.css | 34 +++++++++++++++++++++ templates/partials/base.html.twig | 50 ++++--------------------------- 2 files changed, 40 insertions(+), 44 deletions(-) create mode 100644 css/animated-image.css diff --git a/css/animated-image.css b/css/animated-image.css new file mode 100644 index 0000000..6941a65 --- /dev/null +++ b/css/animated-image.css @@ -0,0 +1,34 @@ +.animated-image { + display: grid; + position: absolute; + align-items: center; + text-align: center; + overflow: hidden; +} + +.animated-image > * { + grid-column: 1; + grid-row: 1; + position: relative; + transition: all 0.5s; +} + +.animated-image img { + top: 0; + z-index: 50; +} + +.animated-image a { + top: 100%; + text-decoration: none; + color: rgb(243, 243, 243); + font-weight: bold; +} + +.animated-image:hover img { + top: -100% !important; +} + +.animated-image:hover a { + top: 0; +} diff --git a/templates/partials/base.html.twig b/templates/partials/base.html.twig index 16717a9..045b76d 100644 --- a/templates/partials/base.html.twig +++ b/templates/partials/base.html.twig @@ -30,6 +30,7 @@ {% do assets.addCss('theme://pluginAppObj/imFooter_pluginAppObj_03/custom.css', 40) %} {% do assets.addCss('theme://pluginAppObj/imFooter_pluginAppObj_05/custom.css', 40) %} {% do assets.addCss('theme://css/navbar.css', 50) %} + {% do assets.addCss('theme://css/animated-image.css', 50) %} {% endblock %} {% block custom_stylesheets %}{% endblock %} @@ -74,58 +75,19 @@ {% block footer %}