title: on hover overlay image in CSS
body: <p>I need a div with picture bg to overlay an image (with some amount transparency) when hovered on. I need to be able to have one transparent overlay that can be used and reused throughout the site on any image. My first attempt was round-about to say the least. Because I found out you cannot roll-over an invisible div I devised a sandwhich system in which the original image is the first layer, the overlay is the second layer, and the original image is third layer again. This way, when you roll-over, the original image disappears revealing the overlay image over the original image:</p>
  
  <p><a href="http://www.nightlylabs.com/uploads/test.html" rel="nofollow noreferrer">http://www.nightlylabs.com/uploads/test.html</a></p>
  
  <p>So it works. Kinda. Because of you cannot interact with an visibility:invisible element (why?!) the roll-over flickers unless you rest the cursor on it.</p>
  
  <p>Any help? This method is bad so if anyone has a better one please comment.</p>