abril 3, 2009
Publicado en CSS,Desarrollo Web,Diseño,Maquetación | No comments
Efecto off en imágenes con css
Algunos me habían preguntado como lograr que una imagen que tiene un enlace hacia otro sitio o artículo se muestre como en estado de off o mas opaca, y al pasar el Mouse se muestre el color original de la misma. Como el efecto que veras pasando el mouse sobre la imagen que se encuentra arriba:
Como logramos este efecto en las imágenes?
Simplemente copiamos este código en nuestra hoja de estilo (Style.css)
CSS:
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;}a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
y cada vez que queramos darle este efecto a una imagen agregamos la clase “linkopacity” ejemplo:
HTML:
<a class=”linkopacity” href=”http://www.xyberneticos.com/”><img src=”images/demo.jpg” style=”border:1px solid black;”></a>