rollover image opacity

  • Resolved ryan_tnt

    (@ryan_tnt)


    14 years, 8 months ago

    I have the following code:

    img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

    But I only want this for certain images not every image on the page.
    How can I change this?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Mark Tabner

    (@mar_da_moose)

    14 years, 8 months ago

    You will have to declare this explicitly for every section you want it to happen on.

    For example say you have a header div with images that are links, and a container div with images that are links, but only want images in ‘container to be links, your CSS would look a little like this:

    #header {
width: 500px;
etc.
etc.
}
#container {
width: 500px;
etc.
etc.
}
#container a img{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
#container a:hover img {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

    So now only image links in the container div will have the opcaity property

    Mark

    esmi

    (@esmi)

    14 years, 8 months ago

    Please note that this is a WordPress forum – not a general CSS help resource.

    Thread Starter ryan_tnt

    (@ryan_tnt)

    14 years, 8 months ago

    thnx Mark it worked.

    @esmi, I wasnt sure where to post it, where should I have posted it then?

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘rollover image opacity’ is closed to new replies.