Efecto de luz con CSS en las imagenes
Mientras jugaba con CSS y curioseaba con la propiedad opacity, logré un efecto que había visto en algunos sitios pero creí que se hacía con Javascript. Se trata de reducir la opacidad de las imágenes en un mouseover con la propiedad :hover, creando así un curioso efecto:
En lo personal me parece un efecto bastante agradable, para implementarlo sólo hay que agregar a la hoja de estilos algo como esto: img:hover { opacity: .90; filter:alpha(opacity=90); }.
“filter:alpha” es un filtro para que la opacidad funcione en IE, y aclarar que la propiedad opacity no es una propiedad CSS válida.
Aunque no es uno de mis ‘efectos’ preferidos, siempre prefiero ver que el
imgtiene la opacity al 90%, y luego en elimg:hoverya meterle el 100%.De hecho así es como lo tenía originalmente, pero realmente lo de “efecto de luz” se nota más como está ahora. Pero si, igual se ve bien de la forma contraria.
Para anotar, yo creí que para esto se usaban dos imagenes, una la original y la otra para el hover jeje.
Seguro que todos hemos pensado eso alguna vez :).
Lo estaba viendo con ff y super, pero lo probe con IE y, problemas voy a tratar de buscar una solución, si la encuentro la publico, saludos excelente pagina….
Muy bueno, pero con: alpha(opacity=50);, se nota mas, Gracias