img test

Nerban · Dec 12, 2023 · 59aace0 · 59aace0
1 parent 0a597a7
commit 59aace0
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/src/_includes/slides/start.njk b/src/_includes/slides/start.njk
@@ -9,11 +9,11 @@
             <a href="#{{key}}">
                 <div class="font-semi-bold hover:outline outline-2 outline-offset-4 bg-cover bg-center bg-blue-300  outline-yellow-500 shadow-blue-900 aspect-square 
                 {% if loop.index < packs|length %}
-                hover:bg-[url({{ '/images/art/art'+key+'.png' | url }})] 
+                hover:bg-[url({{ '../images/art/art'+key+'.png' | url }})] 
                 hover:text-yellow-500
                 {% else %}
                 motion-reduce:animate-pulse
-                hover:bg-[url({{'/images/theme.jpg' | url }})] 
+                hover:bg-[url({{'../images/theme.jpg' | url }})] 
                 hover:text-yellow-500
                 {%  endif %}
                 grid place-content-center rounded-md">
@@ -24,7 +24,7 @@
             keine Daten  
         {% endfor %}
         {% for i in range(packs|length ,24) %}
-            <a href="#"><div class="font-semi-bold hover:outline outline-2 outline-offset-4 bg-cover bg-center bg-blue-200 hover:text-yellow-500  outline-yellow-500 shadow-blue-900 aspect-square hover:bg-[url({{ '/images/theme.jpg' | url }})]  grid place-content-center rounded-md">
+            <a href="#"><div class="font-semi-bold hover:outline outline-2 outline-offset-4 bg-cover bg-center bg-blue-200 hover:text-yellow-500  outline-yellow-500 shadow-blue-900 aspect-square hover:bg-[url({{ '../images/theme.jpg' | url }})]  grid place-content-center rounded-md">
                <div class=" group-hover:drop-shadow-lg shadow-black font-semibold drop-shadow-md"> {{loop.index + packs|length}} </div>
             </div></a>  
             {%else%}

diff --git a/src/style/style.css b/src/style/style.css
@@ -934,6 +934,54 @@ video {
   background-image: url(/images/theme.jpg);
 }
 
+.hover\:bg-\[url\(\.\.\/images\/art\/art1\.png\)\]:hover {
+  background-image: url(../images/art/art1.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/art\/art10\.png\)\]:hover {
+  background-image: url(../images/art/art10.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/art\/art11\.png\)\]:hover {
+  background-image: url(../images/art/art11.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/art\/art2\.png\)\]:hover {
+  background-image: url(../images/art/art2.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/art\/art3\.png\)\]:hover {
+  background-image: url(../images/art/art3.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/art\/art4\.png\)\]:hover {
+  background-image: url(../images/art/art4.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/art\/art5\.png\)\]:hover {
+  background-image: url(../images/art/art5.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/art\/art6\.png\)\]:hover {
+  background-image: url(../images/art/art6.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/art\/art7\.png\)\]:hover {
+  background-image: url(../images/art/art7.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/art\/art8\.png\)\]:hover {
+  background-image: url(../images/art/art8.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/art\/art9\.png\)\]:hover {
+  background-image: url(../images/art/art9.png);
+}
+
+.hover\:bg-\[url\(\.\.\/images\/theme\.jpg\)\]:hover {
+  background-image: url(../images/theme.jpg);
+}
+
 .hover\:text-blue-200:hover {
   --tw-text-opacity: 1;
   color: rgb(191 219 254 / var(--tw-text-opacity));