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:
