Las imágenes aumentan la participación de los usuarios en los sitios web. Es por eso que necesita optimizar imágenes, aprender a agregar hermosas galerías de imágenes y solucionar problemas de imágenes en su sitio. Hay muchas formas de hacer que sus imágenes se destaquen. Uno de ellos usa un efecto de desvanecimiento en las imágenes. En este artículo, le mostraremos cómo desvanecer imágenes con el mouse sobre WordPress. Básicamente, cuando el usuario pasa el mouse sobre una imagen en su sitio, se desvanece levemente. Vea la captura de pantalla de ejemplo a continuación:
En primer lugar, le mostraremos cómo agregar un efecto de desvanecimiento simple a las imágenes de sus publicaciones de WordPress. Usaremos CSS para esto. Todo lo que necesita hacer es copiar y pegar el siguiente código en el archivo style.css de su tema o tema hijo. .post img: hover {opacidad: 0.6; filtro: alfa (opacidad = 60); / * Para IE8 y versiones anteriores * /} 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, instantáneamente cambia la opacidad. Suena un poco difícil, ¿verdad? Hagámoslo un poco más suave agregando reglas de transición CSS. .post img: hover {opacidad: 0.6; filtro: alfa (opacidad = 60); / * Para IE8 y anteriores * / -webkit-transition: ambos son fáciles; -moz-transición: ambos son fáciles; -ms-transición: ambos son fáciles; -o-transición: ambos se facilitan; transición: cada 2 instalaciones; } También puede revertir este efecto estableciendo una opacidad predeterminada más baja para sus imágenes y luego acelerando a la opacidad total produciendo un efecto brillante. Para hacer esto, solo necesita usar el siguiente CSS en su hoja de estilo: .post img {opacidad: 0.7; filtro: alfa (opacidad = 70); / * Para IE8 y anteriores * /} .post img: hover {opacity: 1.0; filtro: alfa (opacidad = 100); / * Para IE8 y anteriores * / -webkit-transition: ambos son fáciles; -moz-transición: ambos son fáciles; -ms-transición: ambos son fáciles; -o-transición: ambos se facilitan; transición: cada 2 fácil; } Es posible que algunos de nuestros usuarios no quieran agregar este efecto a todas las imágenes en sus publicaciones. ¿Qué tal las imágenes destacadas o las miniaturas de las publicaciones? Para agregar este efecto solo a las miniaturas de sus publicaciones, puede usar la clase .wp-post-image generada por WordPress predeterminada para las imágenes destacadas. Simplemente reemplace .post img: hover con img.wp-post-image: hover. Puede cambiar el valor de opacidad o el tiempo de retardo de la transición para lograr el efecto deseado. Esperamos que este artículo le haya ayudado a aprender a desenfocar imágenes con el mouse sobre WordPress. Háganos saber lo que piensa dejando sus comentarios y preguntas en los comentarios a continuación. No olvides seguirnos en Twitter.