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

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.