'Hover image display image' CSS is not working properly
<p>I searched around the Internet and found this: <a href="https://stackoverflow.com/questions/18361924/how-to-display-image-over-image-on-hover-with-css">How to display image over image on hover with css</a>.<br>
I tried the code of <a href="https://i.stack.imgur.com/zOjXI.png" rel="nofollow noreferrer">this image</a> in jsfiddle and blog article using Chrome and Firefox.<br>
None of them shows result like <a href="https://i.stack.imgur.com/RslYz.jpg" rel="nofollow noreferrer">this image</a>.<br>
What is not correct in my code? Thanks.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>a {
  position: relative;
  display: inline-block;
}

a:hover:before {
  content: '';
  display: block;
  background-image:url('http://i.imgur.com/fGAbTOj.png');
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#"&gt;&lt;img src="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_80b965d66b13d6eb5e1468151a371e12fe159663.600x338.jpg" /&gt;&lt;/a&gt;</code></pre>
</div>
</div>
</p>