title: Display <div> or <span> over image on :hover
body: <p>I'm looking for a method that would allow a <code>div</code> or <code>span</code> element to appear over a image when you <code>:hover</code> over that image. I'm able to do this using the <code>.image:hover ~ .overlay</code>, but it's not exactly what I'm looking for. The <code>div</code> or <code>span</code> element needs to take the dimensions of the images, since there will be multiple sizes.</p>
  
  <h2>Example</h2>
  
  <p><code>&lt;img width="200" height="200"/&gt;</code> would allow you to <code>:hover</code> changing the <code>div</code> or <code>span</code> element from <code>display: none</code> to <code>display: block</code> (doesn't necessarily need to be a block). The element that's being changed from invisible to visible would have to automatically detect the size of the image and match the size of the element to these same dimensions (200x200). However, I could also have a <code>&lt;img width="300" height="400"/&gt;</code> that would need the element to match the size (300x400).</p>
  
  <p>I'm also looking for a super easy way for these elements to be positioned perfectly over the images.</p>
  
  <p><a href="http://codepen.io/mtthwbckmn/pen/fkLrb" rel="noreferrer">Here's my code pen</a> to show what I've got so far.</p>