Get a free trial // Grow your CSS skills // Land your dream job

Faded Image?

  • # November 8, 2008 at 7:35 pm

    Hello Everyone.

    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.


    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 ?

    # November 9, 2008 at 12:02 am

    Its on the main site, … -broswers/

    # November 9, 2008 at 5:46 pm

    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.

    # November 9, 2008 at 7:40 pm

    Thanks guys for the reply :D

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed