Las imágenes aumentan la participación de los usuarios en los sitios web. Es por eso que necesita optimizar las imágenes, aprender a agregar hermosas galerías de imágenes y solucionar cualquier problema de imagen en su sitio. Hay muchas formas de hacer que sus imágenes se destaquen. Uno de ellos está usando un efecto de desvanecimiento en las imágenes. En este artículo, le mostraremos cómo desvanecer las imágenes al pasar el mouse en WordPress.
Básicamente, cuando el usuario pasa el mouse sobre una imagen en su sitio, se desvanecerá levemente. Vea la captura de pantalla de ejemplo a continuación:
Primero, le mostraremos cómo agregar un efecto de atenuación simple en las imágenes en sus publicaciones de WordPress. Usaremos CSS para esto. Todo lo que necesita hacer es copiar y pegar el siguiente código en su tema o tema hijo 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 se muestran en las publicaciones de WordPress. Sin embargo, hay un pequeño error en este fragmento. Cuando un usuario pasa el mouse sobre una imagen, su opacidad cambia inmediatamente. Parece un poco difícil, ¿verdad? 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, luego aumentando la opacidad total produciendo un efecto brillante. Todo lo que necesita hacer es usar el siguiente CSS en su 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é hay de las imágenes destacadas o las miniaturas de las 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 destacadas. Solo reemplaza .post img:hover con img.wp-post-image:hover.
¿Te ha resultado útil??
0 / 0