WordPress.org

Ready to get started?Download WordPress

Forums

IMAGE OPACITY colour effect (4 posts)

  1. annalouis
    Member
    Posted 2 years ago #

    Hello
    I am using Twenty Ten and want the opacity of an image to change when a mouse hovers over it. I have used the following code in my child theme, but I want the opacity to go to a black colour not white, can anyone advise how to do this?

    Thanks

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

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Don't edit the Twenty Ten theme. Instead create a child theme for your changes. Once your child theme is active, we should be able to help with the customisation.

  3. annalouis
    Member
    Posted 2 years ago #

    hello
    I have tried a new code and set up a child theme, in the css i have added:
    a:hover img {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    }
    If you look at http://www.kidsmoderndesign.co.uk, you can see the image fades to white, I would like it to go to to a transparent shade of black with the image showing through, when the mouse hovers over. Please could you advise? Thanks

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    I'm sorry but it is beyond the scope of these forums to teach CSS. Try asking on a general CSS forum. I'd also recommend using Firefox with the Firebug add-on for this kind of CSS work.
    http://getfirebug.com/

Topic Closed

This topic has been closed to new replies.

About this Topic