Show image on link hover inside of table
<p>I'm trying to get a scanned image of a receipt stored on the server to display after hovering on a link inside of a <code>table</code>. I'm not sure what I am doing wrong but was curious if someone could point me in the right direction.</p>

<p>Here is what I have so far</p>

<p><strong>CODE</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> jQuery(document).ready(function() {
   $(".preview").hover(function() {
     $(this).closest('img').show();
   }, function() {
     $(this).closest('img').hide();
   });
 });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code> .hide-image {
   display: none;
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;tr&gt;
  &lt;td&gt;01/14/16&lt;/td&gt;
  &lt;td&gt;
    &lt;a href="#" class="preview"&gt;Lowes Receipt
          &lt;img src="image-path/image.jpg" class="hide-image" style="z-index: 100; position: absolute;" /&gt;&lt;/a&gt;
  &lt;/td&gt;
  &lt;td&gt;$1235.96&lt;/td&gt;
&lt;/tr&gt;</code></pre>
</div>
</div>
</p>