Display image when mouse over image
<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>