louiseann Posted February 11, 2012 Share Posted February 11, 2012 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 More sharing options...
dsonesuk Posted February 11, 2012 Share Posted February 11, 2012 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.