title: How do I properly position images in my css gallery?
body: <p>Hey this is my first ever question so I'm sorry if I get anything wrong.</p>
  
  <p>I am trying to create a gallery using <strong>only</strong> HTML and CSS, so far I have got it all aligned and pretty much sorted. The problem is with the image enlarger on hover, when you hover over the enlarged image shows up on top of it's respective image but when you scroll down and hover over an image the enlarged image stays put and doesn't follow the picture.</p>
  
  <p>I have tried playing about with the <em>position</em> property for both the image and the hovered image but I can't get it right. I still want the image to 'pop out' of the divs though.</p>
  
  <p>I have the code pasted on the link below:<br>
  <a href="http://pastebin.com/fZxbKZEJ" rel="nofollow">http://pastebin.com/fZxbKZEJ</a></p>