title: Display image when mouse over image
body: <p>I have a small icon set as</p>
  
  <pre><code>&lt;a class="snapchat" style="margin: 5px 5px 0 -2px;" 
   target="_blank" href="#"&gt;&lt;img src="theimage" /&gt;
   &lt;/a&gt;
  </code></pre>
  
  <p>I need to display a div below with an image when user mouse over the icon.
  I tried by adding a hover class to the icon:</p>
  
  <pre><code>a.snapchat:hover {
      width:200px;
      height:200px;
      background-image: url("hover-image");
      position:relative;
      top:60px;
  }
  </code></pre>
  
  <p>but it does not work as expected. Is there a solution to get this?</p>
  
  <p>Fiddle : <a href="https://jsfiddle.net/tkux5uav/" rel="nofollow">https://jsfiddle.net/tkux5uav/</a> </p>