Haralampije
New Member
I'm creating a hover effect so that when someone mouse-over's on an image scan lines appear, but can't get the damn overlay image to be the same size as the image.Take a look at this fiddle: http://jsfiddle.net/number8pie/wwmPL/Here's the HTML:\[code\]<div class="container"> <a href="http://stackoverflow.com/questions/15500403/#"> <div class="overlay"></div> <img src="http://www.mainlymunros.co.uk/images/green%20square.bmp" repeat> </a></div>\[/code\]Here's the CSS:\[code\].container { position: relative; max-width: 200px;}img { width: 100%; position: relative; z-index: 1; padding: 7px; border: 1px solid #333;}.overlay { display: none; position: absolute; z-index: 5; width: 100%; height: 100%; margin: 8px; background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;}a:hover .overlay { display: block;}\[/code\]If you hover over the green block you can see the scan lines overlap at the bottom, I want to remove this overlap.The image is dynamic and changes size depending on the size of the browser size.Anyone got any suggestions?