title: Display image when hover over button
body: <p>This is <a href="http://classichits.ie/" rel="nofollow">my site</a>.</p>
  
  <p>What I am trying to do: <strong>display an image when user hovers over the links</strong>.</p>
  
  <p>I am definitely making some stupid mistake but I am not really sure which.</p>
  
  <p>This is what I have done:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="nm"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Cork&lt;/a&gt;
          &lt;div class="place-image"&gt;
            &lt;img src="http://classichits.ie/wp-content/uploads/2016/02/cork.png"&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  
    .......Remaining  li's.....
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.place-image{
      display:none;
  }
  
  div.place-image{
      width:326px;
      height:326px;  
  }
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>$('.place-image').hover(
      function() {
          $('.place-image').fadeIn('slow');
      },function() {
          $('.place-image').fadeOut('slow');
      }
  );
  </code></pre>
  
  <p>Please help me out.</p>