title: Implementing New Image Overlay on Existing code (HTML5 and CSS 3)
body: <p>How can I get an Image overlay to work with this code?</p>
  
  <p>What I want is a set of icons to overlay, ontop of a image when the cursor moves over it.</p>
  
  <p><a href="http://socialartist.co/index.html" rel="nofollow">http://socialartist.co/index.html</a></p>
  
  <p>The code in question is HTML 5 and CSS 3, and has quite a lot of mark-up:</p>
  
  <pre><code>&lt;ul class="items x_columns"&gt;
   &lt;li data-id="id-1" data-cat="#luxury"&gt;
    &lt;div class="preview"&gt;&lt;a href="#" class="frame"&gt;
     &lt;img src="https://i1.sndcdn.com/avatars-000008744854-5sr588-large.jpg?d408275" id="imgSmile" alt=""/&gt;&lt;/a&gt;
    &lt;/div&gt;
   &lt;a class="title" href="#"&gt;Kirkbridge DNB&lt;/a&gt;
   &lt;p&gt;UK | Drum and Bass&lt;/p&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>When I try to add a new div it just breaks the design (eg messes up the preview class border)</p>
  
  <p>Is there 'an easy way' to just overlay onto an existing image, as above.</p>
  
  <p>I don't really know how to set this up on Fiddle; I am hoping that ppl could just use developer tools (inspect element) on the page URL above?</p>