Cómo Desvanecer Imágenes con el Mouseover en WordPress

Las imágenes aumentan la participación de los usuarios en los sitios web. Esta es la razón por la que necesita optimizar las imágenes, aprender a añadir bellas galerías de imágenes, y arreglar cualquier problema de imagen en su sitio. Hay muchas maneras de hacer que sus imágenes destaquen. Uno de ellos es el uso de un efecto de fundido en las imágenes. En este artículo, le mostraremos cómo desvanecer imágenes al pasar el ratón por encima de WordPress.

Básicamente, cuando el usuario pasa el ratón por encima de una imagen de su sitio, ésta se desvanece ligeramente. Vea el ejemplo de la captura de pantalla a continuación:

En primer lugar, le mostraremos cómo añadir un efecto de fundido simple en las imágenes de sus mensajes de WordPress. Para ello utilizaremos CSS. Todo lo que tiene que hacer es copiar y pegar el siguiente código en el archivo sstyle.css de su tema o tema hijo.

1234.post img:hover {opacidad:0.6;filtro:alfa(opacidad=60); /* Para IE8 y anteriores */}

Este fragmento de CSS afectará a todas las imágenes mostradas en los posts de WordPress. Sin embargo, hay un pequeño fallo en este fragmento. Cuando un usuario pasa el ratón por encima de una imagen, cambia instantáneamente la opacidad. Esto se siente un poco duro, ¿verdad? Hagámoslo un poco más suave añadiendo reglas de transición CSS.

123456789.post img:hover{opacidad:0.6;filtro:alpha(opacidad=60); /* Para IE8 y anteriores */-webkit-transición: all2s ease;-moz-transición: all2s ease;-ms-transición: all2s ease;-o-transición: all2s ease;-o-transición: all2s ease;- transición: all2s ease}

También puede invertir este efecto estableciendo una opacidad predeterminada más baja para sus imágenes y, a continuación, reducirla hasta alcanzar la opacidad total produciendo un efecto resplandeciente. Todo lo que necesitas hacer para eso es usar el siguiente CSS en tu hoja de estilo:

12345678910111213.post img {opacidad:0.7;filtro:alfa(opacidad=70); /* Para IE8 y anteriores */}.post img:hover{opacidad:1.0;filtro:alfa(opacidad=100); /* Para IE8 y anteriores */-webkit-transition: all2s ease;-moz-transition: all2s ease;-ms-transition: all2s ease;-o-transition: all2s ease}

Es posible que algunos de nuestros usuarios no quieran añadir este efecto a todas las imágenes de sus mensajes. ¿Qué tal sólo imágenes destacadas o imágenes en miniatura? Para añadir este efecto sólo a las miniaturas de sus mensajes, puede utilizar la clase predeterminada .wp-post-image generada por WordPress para las imágenes destacadas. Simplemente reemplace .post img:hover con img.wp-post-image:hover.

Puede ajustar el valor de opacidad o el tiempo de retardo de transición para obtener el efecto deseado. Esperamos que este artículo le haya ayudado a aprender a desvanecer imágenes al pasar el ratón por encima de WordPress. Háganos saber lo que piensa dejando sus comentarios y preguntas en los comentarios de abajo. No olvides seguirnos en Twitter.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir