In the case you pointed out, I am literally applying opacity to the img elements themselves like:
img { opacity: 0.6; }
Notice I'm not using alpha image filters or any other stuff to support older browsers. I just decided it wasn't that important for such a little thing. Then on the hover event, I just push it back up like:
img:hover { opacity: 1.0; }
Check out the link jonz posted for a more comprehensive technique to handling CSS transparency. Even then, if you REALLY wanted it to be cross-browser perfect, it'd be better to use a sprites-like technique.
Im sorta stuck at the moment. I want to have an image on a site where the opacity is lowered, and then when you hover over it, the opacity increases.
Here is an example from the videos page on this site.
http://www.bluecone.co.uk/images/post.png
Can this be done using Html / css ?
The only way i could think of is to have an image rollover ? Is there an easier way ?
http://css-tricks.com/css-transparency- ... -broswers/
img {opacity: 0.6;
}
Notice I'm not using alpha image filters or any other stuff to support older browsers. I just decided it wasn't that important for such a little thing. Then on the hover event, I just push it back up like:
img:hover {opacity: 1.0;
}
Check out the link jonz posted for a more comprehensive technique to handling CSS transparency. Even then, if you REALLY wanted it to be cross-browser perfect, it'd be better to use a sprites-like technique.