¿Quieres desenfocar imágenes al pasar el mouse en WordPress?

El desvanecimiento de la imagen ayuda a que su sitio sea más interactivo y atractivo. Además, puede aumentar la cantidad de tiempo que los visitantes pasan en su sitio web.

En este artículo, le mostraremos cómo agregar fácilmente un efecto de imagen de desvanecimiento en WordPress.

¿Por qué disolver imágenes al pasar el mouse en WordPress?

Al agregar efectos de desplazamiento de imagen, como una imagen de desvanecimiento de desplazamiento, 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 en su sitio web aparezcan o desaparezcan lentamente a medida que los usuarios pasan el mouse 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 es sutil y no afectará negativamente la experiencia de lectura del visitante ni la optimización de la imagen realizada.

Dicho esto, le mostraremos cómo agregar un desvanecimiento a sus imágenes al pasar el mouse en WordPress, paso a paso.

Agregar imagen desvanecida al pasar el mouse por WordPress

Este tutorial requiere algunos conocimientos básicos sobre 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 a 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 su usuario se desplace sobre él. Puede aumentar o disminuir la “opacidad” y cambiar la “facilidad de 2 segundos” 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á para sus visitantes.

Si desea que el efecto de desvanecimiento sea más notorio, puede comenzar con una imagen descolorida y desvanecerse lentamente hasta que la imagen sea nítida.

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 desvanecimiento sea más lento o más rápido y cambiar los niveles de “opacidad”.

Así es como se verá para sus visitantes.

Agregue un efecto de desvanecimiento de imagen a la imagen destacada o publique miniaturas

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 que el anterior, pero lo reemplaza .post img:hover con img.wp-post-image:hover. Todas las demás imágenes en tus publicaciones seguirán siendo las mismas.

Así es como se verá la miniatura de su 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 te haya ayudado a aprender a desvanecer imágenes al pasar el mouse sobre WordPress. También puede consultar nuestra guía sobre cómo iniciar su propio podcast y nuestras selecciones del mejor registrador de dominios.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo Y Facebook.