Jump to content

colour block hover over image


louiseann
 Share

Recommended Posts

HelloI am a newbie to CSS. I am trying to create a block colour hover when a mouse hovers a whole image. So the image appears normal, then changes to a transparent shade of black over the whole image when hovered over. At the moment it goes white and looks too faded. I still want the image to show under the black - just transparent with some white text on. Can anyone please advise me? This is what I put in my stylesheet: a:hover img {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5;} This is what I have at the moment: www.kidsmoderndesign.co.uk Thanks

Link to comment
Share on other sites

That's because you are fading into a white background, you need to add a black or dark grey background colour behind the image. One way to achieve this is to use the anchor element

.alignleft img {float:left;}.alignleft a {display: block; background-color: #000; overflow:hidden;}

but this affect any other element using .alignleft class with anchor, and img elements.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...