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.

    [img]http://www.bluecone.co.uk/images/post.png[/img]

    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,
    http://css-tricks.com/css-transparency- … -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:

    Code:
    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:

    Code:
    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.

*May or may not contain any actual "CSS" or "Tricks".