ddmxhnketw
New Member
I would like to change the opacity of the img and add a 50x50 thumbnail for zoom on hover using only CSS no jquery. This is what I have done so far.HTML code:\[code\]<div class="span4"> <a class="zoom-icon" href="http://stackoverflow.com/questions/15842385/#"> <img class="blackout image-1" alt="Elite Sports" src="http://www.domain.com/images/es.jpg" width="300" height="300"> </a></div>\[/code\]CSS code:\[code\].span4 { margin: 35px 50px; border: 5px solid #000; }.span4:hover { border: 5px solid #ccc; }.span4 a:hover { background: #000; }.blackout:hover { opacity: .0; }\[/code\]I have the black background on hover working but I can't figure out how to make the thumbnail show up over top of the black background "blackout". Any helpful tips would be much appreciated.UPDATE w/Fiddle:http://jsfiddle.net/8BMYH/