Grow your CSS skills. Land your dream job.

CSS image rollovers

  • # July 21, 2010 at 4:23 pm

    Hi,

    Always loving css-tricks, but now it’s suddenly prompted me to ask a question! Had a bit of a query and thought maybe you guys could help me.

    This is my site: http://www.artistrichardcook.co.uk – simple, simple… (I use Indexhibit to power it) however I wanted to play around a little with the images. I want to be able to hover the images and that a block colour, with a certain opacity (specifically from an image), would hover over it. I have managed to create some css for it:

    Code:
    {
    background: transparent url(../images/black80.png) repeat;
    background: rgba(0, 0, 0, 0.8) none;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }

    I, firstly, assume this is correct, if it’s not or could be better please let me know!

    Is there somewhere I can add this to the css to apply to all the images? I tried this:

    Code:
    a img:hover {
    background: transparent url(black80.png) repeat;
    background: rgba(0, 0, 0, 0.8) none;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }

    But didn’t work :(

    Just need some direction, hope you guys can help!

    Cheers,

    Richard :ugeek:

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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