fix: frog images are now animated with the mouse cursor

src/lib/section.html

@@ -3,6 +3,7 @@
   id,
   title_picture,
   title_picture_hover = None,
+  title_picture_active = None,
   title_picture_offset = "0px",
   title_color = "var(--color-text)")
 -%}
@@ -14,6 +15,7 @@
         color: {{ title_color }};
         --picture-url:url('{{ title_picture }}');
         --picture-hover-url:url('{{ title_picture_hover or title_picture }}');
+        --picture-active-url:url('{{ title_picture_active or title_picture }}');
         --picture-offset: {{ title_picture_offset }};
       "
     >

src/lib/section.scss

@@ -18,16 +18,12 @@
     }
 
     &--title {
-        z-index: -1;
-
         background: transparent;
         position: relative;
         margin-top: 110px;
         align-self: center;
 
         &::before {
-            z-index: -1;
-
             position: absolute;
             top: -110px;
             left: var(--picture-offset);
@@ -42,6 +38,10 @@
             background-image: var(--picture-hover-url);
         }
 
+        &:active::before {
+            background-image: var(--picture-active-url);
+        }
+
         @media ($mobile-breakpoint) {
             margin-top: 70px;
 

src/pages/index/presentation.html

@@ -12,6 +12,7 @@
   "collective",
   "/img/section-collective.png",
   title_picture_hover = "/img/section-collective-hover.png",
+  title_picture_active = "/img/section-collective-active.png",
   title_picture_offset = "170px"
   ) %}
 <div class="presentation--content">