Enhance image class for better hover and active state effects (mobile) (#144)

Kocal · web-flow · commit dee7fd7e5c15 · 2026-05-18T20:22:37.000+02:00
diff --git a/templates/components/Home/Clients.html.twig b/templates/components/Home/Clients.html.twig
@@ -29,7 +29,7 @@
                         width="{{ client.width }}"
                         height="{{ client.height }}"
                         loading="lazy"
-                        class="{{ client.imgClass|default('max-h-8 sm:max-h-10') }} max-w-[80%] w-auto h-auto object-contain grayscale opacity-75 group-hover:grayscale-0 group-hover:opacity-100 transition duration-200"
+                        class="{{ client.imgClass|default('max-h-8 sm:max-h-10') }} max-w-[80%] w-auto h-auto object-contain grayscale opacity-75 group-hover:grayscale-0 group-active:grayscale-0 group-hover:opacity-100 group-active:opacity-100 transition duration-200"
                     >
                 </li>
             {% endfor %}

Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`	`width="{{ client.width }}"`
`30`	`30`	`height="{{ client.height }}"`
`31`	`31`	`loading="lazy"`
`32`		`- class="{{ client.imgClass\|default('max-h-8 sm:max-h-10') }} max-w-[80%] w-auto h-auto object-contain grayscale opacity-75 group-hover:grayscale-0 group-hover:opacity-100 transition duration-200"`
	`32`	`+ class="{{ client.imgClass\|default('max-h-8 sm:max-h-10') }} max-w-[80%] w-auto h-auto object-contain grayscale opacity-75 group-hover:grayscale-0 group-active:grayscale-0 group-hover:opacity-100 group-active:opacity-100 transition duration-200"`
`33`	`33`	`>`
`34`	`34`	`</li>`
`35`	`35`	`{% endfor %}`