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


Comentarios para Como aplicar el efecto de opacidad con CSS a las imágenes

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

    Fliberty 21 junio 2010 11:56 pm Responder
  • @Fliberty: denada ;), la verdad es que con CSS también se pueden hacer muchas cosas en cuanto a diseño :D.

    Vera 22 junio 2010 12:15 am Responder
  • @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 15 agosto 2010 1:08 am Responder
  • @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

    Vera 17 agosto 2010 10:10 am Responder
  • Ok

    @Vera voy a ver como le hago, por cierto el CSS del tuto, no se ve correctamente, al parecer un plugin está haciendo interferencia y está enlazando algunas etiquetas…

    Fliberty 17 agosto 2010 3:26 pm Responder
  • @Fliberty
    Gracias por el aviso, es cierto, antes no podía ver dicho error porque visualizaba la caché. Estoy haciendo unas cosillas en la plantilla, tomaré nota de ello y en cuanto pueda lo miro. ;)

    Saludos

    Vera 18 agosto 2010 12:02 am Responder
  • @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…

    Fliberty 18 agosto 2010 1:23 am Responder
  • @Fliberty

    Me alegro que te haya funcionado ;). Por lo que veo tu también tienes trabajo con el theme ;). Yo por hoy lo dejo, ya seguiré en cuanto disponga de tiempo que es hora de descansar.

    Vera 18 agosto 2010 1:29 am Responder
  • Hey, gracias por el dato, ya lo he usado pero siempre tengo que andarlo buscando xq siempre se me olvida xD

    Guest 28 enero 2012 7:26 am Responder

Dejar un Comentario

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