Cambiar las imágenes de un bloque en WordPress cuando ponemos el ratón sobre la imagen, no requiere siempre de instalar un nuevo plugin. Hay maneras con GeneratePress y GenerateBlocks para que no necesitemos más plugins. Un poco de creatividad nos permite crear efectos visuales que permitan al usuario de nuestro sitio web ver elementos destacados cuando pase el ratón.
Al final podrán ver el video de cómo hacerlo
Evaluamos el impacto en rendimiento de los distintos efectos, Web Performance Optimization o WPO
Vemos distintas versiones que podemos hacer de efectos en bloques, imágenes de fondo con títulos en un bloque y cómo afectan los efectos de las distintas versiones en el WPO en Google PageSpeed.
Elegimos el bloque sobre el que vamos a trabajar y añadimos las imágenes de fondo
Seleccionamos el bloque, las imágenes en estado normal y en hover para el background del bloque. Seleccionamos tamaño y opacidad de las imágenes para el bloque, el pseudoelemento, la posición y estado en el que se ven y desaparecen.
Efectos a añadir en el bloque, opacidad de las imágenes y de los títulos, de manera que disponemos qué aparece y qué desaparece al pasar con el ratón y cuándo sucede cada cosa.
Establecemos las transiciones, su duración y el retraso o delay, tanto en normal para una imagen como en hover cuando pasamos el ratón para la otra imagen. Así como los títulos y texto del bloque, para que aparezca y desaparezca con un retardo y transición que no sean bruscos. La duración de la transición es lo que tarda en suceder el evento en si, por ejemplo, desaparecer una imagen, el título y aparecer la otra imagen. El delay o retraso, es lo que tarda en comenzar esa transición desde que me pongo con el ratón encima, es decir, antes de que comience la transición en sí y después de pasar con el ratón. Esto permite un efecto más fluido y adaptado a nuestra vista.