Efecto escala de grises en logos de marcas al pasar el cursor

samuel_lab

Buenas noches, compañeros.

Estoy intentando añadir un efecto a los logos de los fabricantes en el carrusel de mi tienda. La idea es que aparezcan en escala de grises y, al pasar el ratón por encima (hover), recuperen su color original con una transición suave.

He añadido esto a mi themes/classic/assets/css/custom.css:

.product-manufacturer a img {
    filter: grayscale(100%);
    transition: filter 0.5s ease-in-out;
}

.product-manufacturer a img:hover {
    filter: grayscale(0%);
}

Funciona, pero no termina de ir suave. A veces parpadea ligeramente, sobre todo en Chrome o en dispositivos móviles. Los logos con fondo transparente se ven algo 'lavados' en escala de grises. Parece un problema de renderizado o quizás de aceleración por hardware. ¿Hay algo que se me escape o alguna propiedad CSS que debería añadir para mejorar la fluidez y la calidad visual?

ramon_sevilla60

Hola @samuel_lab, me suena ese parpadeo. Es un clásico con algunas transiciones CSS, especialmente con filter. ¿En qué versión de PrestaShop estás? A veces el navegador tiene problemas con la aceleración por hardware si no le 'avisas' de que algo va a cambiar.

También, ¿has probado a inspeccionar el elemento para ver si hay alguna otra regla CSS que esté anulando o interfiriendo con tu transición? A veces la especificidad de los selectores puede jugar malas pasadas. Yo intentaría asegurarme de que el filter sea lo último que se aplique.

Milo

Hola @samuel_lab,

Entiendo perfectamente lo que describes. El problema de 'parpadeo' y la falta de suavidad en las transiciones de filter es bastante común, y a menudo se debe a cómo los navegadores manejan la renderización y la aceleración por hardware de esta propiedad.

Una forma de mejorar esto es combinar la transición de filter con la de opacity y, muy importante, usar la propiedad will-change. Esta propiedad CSS le dice al navegador qué propiedades de un elemento se espera que cambien, permitiéndole optimizar la renderización de antemano.

Además, aplicar una opacity ligera en el estado de escala de grises puede suavizar la apariencia de los logos con fondos transparentes y hacer la transición más agradable. Prueba con este código en tu custom.css:

.product-manufacturer a img {
    filter: grayscale(100%) opacity(0.85); /* Aplicamos una opacidad inicial */
    transition: filter 0.3s ease-out, opacity 0.3s ease-out; /* Transición combinada y más rápida */
    will-change: filter, opacity; /* Sugerencia al navegador para optimización */
}

.product-manufacturer a img:hover {
    filter: grayscale(0%) opacity(1); /* Restauramos color y opacidad al 100% */
}

Explicación de los cambios:

opacity(0.85) en el estado normal: Hace que los logos en escala de grises se vean un poco menos 'duros', especialmente si tienen transparencias.
transition: filter 0.3s ease-out, opacity 0.3s ease-out;: Ahora la transición afecta tanto al filter como a la opacity. Un ease-out suele verse más natural, y un tiempo de 0.3s es a menudo más ágil y suave que 0.5s para estos efectos. Es crucial que ambas propiedades tengan su propia transición definida para que se animen correctamente.
will-change: filter, opacity;: Esta es la clave para el rendimiento. Le indica al navegador que el filter y la opacity de este elemento van a cambiar. El navegador puede entonces optimizar la renderización, a menudo moviendo el elemento a su propia capa de composición de GPU, lo que elimina el parpadeo y mejora la fluidez.

Con esto, deberías ver una mejora significativa en la suavidad y el rendimiento de la transición.

samuel_lab

¡Increíble @Milo! ¡Muchísimas gracias! He implementado tu código en el custom.css y el cambio es brutal. La transición ahora es perfectamente fluida y el parpadeo ha desaparecido por completo. La opacidad que le has añadido también hace que los logos transparentes se vean mucho mejor.

No conocía la propiedad will-change, es un detalle técnico que ha marcado la diferencia. ¡Problema resuelto y he aprendido algo nuevo hoy! Gracias de nuevo por tu ayuda tan precisa y rápida.