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*/}
Hey, gracias por el dato, ya lo he usado pero siempre tengo que andarlo buscando xq siempre se me olvida xD
@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 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
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
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
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: 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: denada ;), la verdad es que con CSS también se pueden hacer muchas cosas en cuanto a diseño :D.
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…