¿Quieres desvanecer las imágenes al pasar el mouse sobre WordPress?
Las imágenes que se desvanecen ayudan a que su sitio sea más interactivo y atractivo. Además, puede aumentar la cantidad de tiempo que sus visitantes pasan en su sitio web.
En este artículo, le mostraremos cómo agregar fácilmente un efecto de imagen atenuada al pasar el mouse sobre WordPress.
¿Por qué se desvanecen las imágenes al pasar el mouse por encima en WordPress?
Al agregar efectos de desplazamiento de imagen, como una imagen atenuada al pasar el mouse, puede hacer que las imágenes de su sitio web de WordPress se destaquen fácilmente.
El efecto de desvanecimiento de la imagen permite que las imágenes de su sitio web aparezcan o desaparezcan lentamente cuando los usuarios se desplazan sobre ellas.
Esto hace que los elementos estáticos como las imágenes sean mucho más atractivos y divertidos para sus visitantes y crea una mejor primera impresión.
Además, el efecto de desvanecimiento de la imagen al pasar el mouse por encima es sutil y no afectará negativamente la experiencia de lectura de su visitante o cualquier optimización de imagen que haya realizado.
Dicho esto, le mostraremos cómo agregar un desvanecimiento a sus imágenes al pasar el mouse sobre WordPress, paso a paso.
Agregar imagen se desvanece al pasar el mouse por encima de WordPress
Este tutorial requiere una comprensión básica de cómo agregar código CSS a WordPress. Para obtener más detalles, consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress.
Luego, puede agregar el siguiente código CSS a su sitio para agregar un desvanecimiento simple en las imágenes que agrega a las publicaciones de WordPress.
.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; }
Este fragmento de código desvanecerá su imagen durante 2 segundos cuando el usuario pase el mouse sobre él. Puede hacer que la ‘opacidad’ sea más alta o más baja y cambiar la ‘facilidad 2s’ para desvanecer la imagen más rápido o más lento.
Si cambia la facilidad, asegúrese de cambiarla en todas las propiedades (webkit, moz, ms, etc.), para que su efecto de desvanecimiento funcione en todos los navegadores.
Así es como se verá a sus visitantes.
Si desea que el efecto de desvanecimiento sea más notorio, puede comenzar con una imagen desvaída y desvanecerse lentamente hasta que la imagen sea clara.
Para hacer esto, pegue el fragmento de código CSS a continuación en su sitio.
.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; }
Al igual que el primer fragmento de código, puede hacer que el efecto de atenuación sea más lento o más rápido y cambiar los niveles de ‘opacidad’.
Así es como se verá a sus visitantes.
Agregar efecto de imagen atenuada a la imagen destacada o a las miniaturas de las publicaciones
Si no desea que el efecto de desvanecimiento de la imagen aparezca en todas las imágenes de sus publicaciones, puede agregar el efecto a imágenes específicas como la imagen destacada o la miniatura de la publicación.
Para hacer esto, simplemente agregue el siguiente fragmento de CSS a su sitio de WordPress.
img.wp-post-image: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; }
Este fragmento de código usa el mismo código CSS anterior, pero reemplaza .post img:hover
con img.wp-post-image:hover
. Todas las demás imágenes de tus publicaciones seguirán siendo las mismas.
Así es como se verá la miniatura de tu publicación con el efecto de desvanecimiento de la imagen.
Si desea agregar aún más efectos de desplazamiento de imágenes, consulte nuestra guía sobre cómo agregar efectos de desplazamiento de imágenes en WordPress.
Esperamos que este artículo le haya ayudado a aprender cómo desvanecer imágenes al pasar el mouse sobre WordPress. Es posible que también desee ver nuestra guía sobre cómo iniciar su propio podcast y nuestras selecciones del mejor registrador de dominios.