148
9 comentarios, 99 compartidos, 148 puntos
Como aplicar el efecto de opacidad con CSS a las imágenes

CSS El efecto de opacidad es muy empleado en las imágenes para dar un mayor diseño al blog. Se trata de un efecto en el que la imagen parece pobre pero cuando pasamos el cursor sobre la misma ésta parece recuperar su nitidez.

Este efecto podemos realizarlo mediante CSS de la siguiente forma:

El siguiente código debemos copiarlo en nuestra hoja de estilos, es decir, lo más normal en el fichero style.css de nuestro blog.

a.opacidad img {      

filter:alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
        -khtml-opacity: 0.6;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /*Internet Explorer 8*/}
a.opacidad:hover img {       filter:alpha(opacity=100); 
        -moz-opacity: 1.0; 
        opacity: 1.0;
        -khtml-opacity: 1.0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*Internet Explorer 8*/}

Una vez hayamos incluido el código anterior, solo nos falta realizar la correspondiente prueba y para ello debemos asignar la correspondiente clase “opacidad” a las imágenes de la siguiente forma:

<a class="opacidad"><img src="URL IMAGEN"></a>

Para poder usar este efecto dentro de nuestras entradas debemos añadir además el siguiente código dentro de nuestra hoja de estilos:

.entry img {     

filter:alpha(opacity=60);       

-moz-opacity: 0.6;
        opacity: 0.6;
        -khtml-opacity: 0.6;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*Internet Explorer 8*/

}

.entry:hover img {      

filter:alpha(opacity=100); 
        -moz-opacity: 1.0; 
        opacity: 1.0;
        -khtml-opacity: 1.0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*Internet Explorer 8*/}

Leave your vote


¿Cómo te quedas?

Me Encanta Me Encanta
14
Me Encanta
Asombrado Asombrado
12
Asombrado
WTF WTF
10
WTF

9 Comentarios

  1. @Vera Ya me funcionó el efecto, lo apliqué a las imágenes enlazadas en el theme de esta web: http://www.contigoperusemanario.org/ aún le estoy dando los retoques para adaptar los artículos anteriores al nuevo theme…

  2. @ Vera: Apliqué el css de tal forma que se aplique automáticamente a todas la imágenes de la web, pero sólo me funciona en firefox, en IE 8 no pasa nada, espero que me puedas dar una mano, muchas gracias…

Share via

Acceso

¿Olvidaste la contraseña?

¿No tienes cuenta? Registro

¿Olvidaste la contraseña?

Introduce los datos de tu cuenta y te enviaremos un enlace para restablecer la contraseña.

El link para restablecer tu contraseña parece inválido o caducado.

Acceder

Privacy Policy

Añadir a Colección

No tienes Colecciones

Aquí encontrarás todas las colecciones que has creado con anterioridad.

GDPR Cookie Consent with Real Cookie Banner