Cómo desvanecer imágenes al pasar el mouse sobre WordPress

 

Las imágenes aumentan la interacción del usuario en los sitios web. Debido a esto, necesita optimizar imágenes, aprender a agregar hermosas galerías de imágenes y solucionar problemas de imágenes en su sitio web. Hay muchas formas de hacer que sus imágenes se destaquen. Uno de ellos utiliza un efecto de disolución en las imágenes. En este artículo, le mostraremos cómo ocultar imágenes cuando pasa el mouse sobre WordPress.

Básicamente, cuando el usuario pasa el cursor sobre una imagen en su sitio web, desaparece ligeramente. Vea la siguiente captura de pantalla de muestra:

Efecto de desvanecimiento de la imagen

Primero, le mostraremos cómo agregar un efecto de combinación simple a las imágenes en sus publicaciones de WordPress. Usaremos CSS para eso. Todo lo que necesita hacer es copiar y pegar el siguiente código en el tema o subtema style.css Archivo.

.post img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}

Este fragmento de CSS afectará a todas las imágenes que aparecen en las publicaciones de WordPress. Sin embargo, hay un pequeño defecto en este fragmento. Cuando un usuario mueve el mouse sobre una imagen, inmediatamente cambia la opacidad. Eso se siente un poco duro, ¿no? Hagámoslo un poco más suave agregando reglas de transición CSS.

.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

También puede revertir este efecto estableciendo una opacidad predeterminada más baja para sus imágenes y luego alcanzando la opacidad total para un efecto brillante. Todo lo que tienes que hacer es usar el siguiente CSS en tu hoja de estilo:

.post img {
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
.post img:hover{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Es posible que algunos de nuestros usuarios no quieran agregar este efecto a todas las imágenes de sus publicaciones. ¿Qué tal solo imágenes destacadas o miniaturas de publicaciones? Para agregar este efecto solo a las miniaturas de tus publicaciones, puedes usar la configuración predeterminada .wp-post-image Clase generada por WordPress para imágenes presentadas. Solo reemplaza .post img:hover Con img.wp-post-image:hover.

Puede ajustar el valor de opacidad o el tiempo de retardo de la transición para lograr el efecto que desea. Esperamos que este artículo le haya ayudado a aprender cómo difuminar imágenes mientras pasa el cursor sobre él en WordPress. Háganos saber lo que piensa dejando sus comentarios y preguntas en los comentarios a continuación.