Tutoriales WordPress

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*/}

9 Comentarios

  • Jajajajaja, y yo que utilizaba sprites para aplicar ese efecto… Muchas gracias, supongo que ahora no cargaré mi blog con tantos sprites, jajajajaja…

    Muchas gracias…

  • @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…

  • @Fliberty

    Internet Explorer es un caso excepcional :D. Prueba eliminando los "filter", por ejemplo algo parecido al siguiente código:

    <pre class="brush:php">

    a img{

    opacity:.50;

    }

    a:hover img{

    opacity:1;

    }

    </pre>

    Saludos