colour block hover over image

[louiseann]

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

[dsonesuk]

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.