¿Quieres desvanecer las imágenes al pasar el mouse por encima en WordPress?

Bajar el tono de las imágenes ayuda a que su sitio web sea más interactivo y atractivo. Además, puede aumentar el tiempo que sus visitantes pasan en su sitio web.

En este artículo, le mostraremos cómo agregar fácilmente un efecto de imagen de aparición y desaparición gradual al pasar el mouse por encima en WordPress.

Cómo desvanecer imágenes al pasar el ratón por encima en WordPress (paso a paso)

¿Por qué las imágenes se desvanecen al pasar el mouse en WordPress?

Puede hacer que las imágenes de su sitio web de WordPress se destaquen fácilmente agregando efectos de desplazamiento de imagen, como imágenes que se desvanecen al pasar el mouse.

Los efectos de imagen desvanecida permiten que las imágenes de su sitio web aparezcan o desaparezcan lentamente a medida que los usuarios se desplazan sobre ellas.

Esto hace que los elementos estáticos, como las imágenes, sean más atractivos e interesantes 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 ni las optimizaciones de imagen que haya realizado.

Habiendo dicho eso, le mostraremos paso a paso cómo agregar un desvanecimiento a una imagen al pasar el mouse sobre WordPress.

Agregar imagen desvanecida 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 agregadas 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 desvanecerá su imagen durante 2 segundos cuando su usuario se desplace sobre él. Puede hacer que la Opacidad sea más alta o más baja, y cambiar la facilidad de 2s para desvanecer la imagen más rápido o más lento.

Si cambia la aceleración, asegúrese de cambiarla en todas las propiedades (webkit, moz, ms, etc.) para que su efecto de atenuación funcione en todos los navegadores.

Así es como aparece para sus visitantes.

Ejemplo de imagen que se desvanece al pasar el mouse

Si desea que el efecto de desvanecimiento sea más evidente, puede comenzar con una imagen desvanecida y desvanecerla gradualmente hasta que la imagen sea clara.

Para hacerlo, pegue el fragmento CSS a continuación en su sitio web.

.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 con el primer fragmento de código, puede hacer que el efecto de desvanecimiento sea más lento o más rápido y cambiar el nivel de “Opacidad”.

Así es como se ve para sus visitantes.

La imagen se desvanece para borrarse al pasar el mouse

Agregue efectos de imagen desvanecidos a las imágenes destacadas o publique miniaturas

Si no desea que el efecto de desvanecimiento de la imagen aparezca en cada imagen de su publicación, puede agregar el efecto a una imagen específica, como su imagen destacada o la miniatura de la publicación.

Para hacerlo, 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 que el anterior, pero lo reemplaza con .post img:hover y img.wp-post-image:hoverTodas las demás imágenes en su publicación permanecerán sin cambios.

Así es como se ve la miniatura de una publicación con un efecto de desvanecimiento de imagen.

Desvanecer la imagen destacada al pasar el mouse

Si desea agregar más efectos de desplazamiento de imagen, consulte nuestra guía sobre cómo agregar efectos de desplazamiento de imagen en WordPress.

Esperamos que este artículo le haya ayudado a aprender a desvanecer imágenes al pasar el mouse por encima en WordPress. También puede consultar nuestra guía sobre cómo iniciar su propio podcast y nuestra selección de los mejores registradores de dominios.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.