jueves, 9 de abril de 2009

CAMBIAR OPACIDAD IMAGEN CON CURSOR ENCIMA

Este es un efecto que podemos obtener gracias a CSS, consiste en mostrar una imágen opaca y que al situar el cursor encima de la imágen esta se muestre de forma normal, podríamos decir que es como si la imágen original se mostrara con una tela encima. Es un efecto que queda bastante bien y que podréis emplear siempre que queráis en vuestras imagenes siguiendo estos simples pasos.

Dirijiros a Diseño->Edicion de HTML en el caso de blogger.
Buscar ]]></b:skin>, justamente encima tendremos que copiar el siguiente código:
a.opacidad img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.opacidad:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
Llegado este punto ya tendremos insertada la clase que nos permitirá crear el efecto, ahora tan solo tendremos que insertar el siguiente código en el lugar que nosotros deseemos mostrar nuestro efecto.

<a class="opacity" href="URL DE LA IMAGEN"><img src="URL DE LA IMAGEN"></a>

Tendréis que sustituir donde puse URL DE LA IMAGEN por la dirección donde se encuentra la imagen que queréis mostrar.

Ejemplo:(Situar cursor encima de la imagen para ver el efecto).


7 Comentarios:

SapMa dijo...

como lo uso man ??? no se como ponerlo... mi pag esta en paginawebgratis.es ... contactame en sapcamster@hotmail.com

mithontime dijo...

Excelente aporte, funciona a la perfección.

Sólo un apunte, para los que copien sin mirar, y es que la clase se llama opacidad en el css, mientras que cuando lo llamamos lo hacemos como opacity.

Pongan el mismo nombre en ambos lugares para que funcione, ya que si lo copian tan cual, invocando la clase opacity, no encontrará ninguna en el css ya que lo hemos llamado opacidad.

Resumiendo, llámenlo igual en todos los sitios en lo que lo pongan, ya sea opacidad u opacity.

Anónimo dijo...

Y para hacer esto pero dentro de un DIV y éste a su vez centrarlo en un lateral. ¿cómo sería?

Publicar un comentario

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.