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

Deja un comentario

Data Life Engine 8.0: un gestor CMS

HyperCam Screen Recorder: que no se te escape nada