Efecto hover grayscale en logos de marcas con Classic

antonio_bcn

¡Hola a todos!

Estoy intentando añadir un efecto sutil a los logos de los fabricantes en el carrusel de mi tienda. La idea es que estén en escala de grises por defecto y, al pasar el ratón por encima (hover), cambien suavemente a color completo. He añadido este CSS a mi themes/classic/assets/css/custom.css:

.brand-image img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.brand-image img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

Funciona, pero no del todo bien. A veces, al hacer hover rápido, el cambio no es tan fluido como debería, y con algunos logos con fondo transparente, parece que hay un pequeño 'parpadeo' o un glitch visual, como si la aceleración por hardware no estuviera funcionando correctamente. ¿Alguien se ha encontrado con esto o sabe cómo hacerlo más suave?

raquelstore

@antonio_bcn Me suena lo que comentas. A mí me pasó algo similar con unas imágenes de categoría. ¿Qué versión de PrestaShop estás usando? A veces, los navegadores manejan las transiciones de filter de manera un poco inconsistente, especialmente con opacity al mismo tiempo. Has probado a añadir un will-change para forzar la aceleración del navegador? Podría ayudar con el parpadeo.

alejandrolab

@raquelstore tiene razón, el will-change puede ser una buena idea. @antonio_bcn, aparte de eso, a veces el problema con el 'flicker' viene de que el elemento no está en su propia capa de renderizado. Un truco que se usaba antes para forzar la aceleración GPU era añadir un transform: translateZ(0); o backface-visibility: hidden; al estado base. Pruébalo a ver si mejora la fluidez.

Milo

Hola @antonio_bcn, entiendo perfectamente el problema del 'flicker' o falta de suavidad en la transición de filtros CSS. Esto es común en navegadores cuando el elemento no se promueve a su propia capa de renderizado GPU o cuando la transición es compleja.

El truco que menciona @alejandrolab de transform: translateZ(0); es muy efectivo para esto en PrestaShop 1.7 (y en general). Fuerza al navegador a renderizar el elemento en una capa separada, lo que optimiza las transiciones. También te recomiendo ajustar la curva de la transición con ease-in-out para un efecto más natural. Aquí tienes el código modificado que deberías añadir a tu themes/classic/assets/css/custom.css:

.brand-image img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.4s ease-in-out, opacity 0.4s ease-in-out;
    transform: translateZ(0); /* Fuerza aceleración por hardware */
    backface-visibility: hidden; /* Otro truco para evitar parpadeos */
}
.brand-image img:hover {
    filter: grayscale(0%);
    opacity: 1;

Con transform: translateZ(0); en ambos estados, te aseguras de que el elemento siempre esté en una capa acelerada por hardware, eliminando el 'parpadeo' y haciendo la transición mucho más suave. El backface-visibility: hidden; es un extra que a veces ayuda también.

antonio_bcn

¡Brutal, @Milo! ¡Muchísimas gracias! He probado tu snippet y el cambio es impresionante. El efecto ahora es totalmente fluido, sin ningún parpadeo ni glitch. El transform: translateZ(0); hizo magia. ¡Perfecto para mi PrestaShop 1.7.2.3! ¡De verdad, un millón de gracias por la ayuda tan directa y efectiva!