title: Jquery: Hide and show a div when image is hover
body: <p>I wonder if someone can help me find a solution to an effect hover to an image in my blog.
  The idea was when I hover an image, you see a div with the image information, link project name, date,...</p>
  
  <p>What i have done is, assign two classes do the div information, class <code>show</code> and class <code>hide</code>, and at the beginning it apears with a class <code>hide</code>.</p>
  
  <p>Then with jQuery/JavaScript when the <code>img:hover</code> it remove the class <code>hide</code> and add a class <code>show</code>.</p>
  
  <p>the problem is, when i do hover to a image, appears the information of all images.</p>
  
  <p>I am wonder if some can help me to make just appear the information of the image that the mouse are hover.</p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;div id="content"&gt;
    &lt;img src="images/1.jpg" alt="Projecto 1" height="290" width="220" /&gt;
    &lt;div class="information hide"&gt;
        &lt;h2&gt;Titulo&lt;/h2&gt;
        &lt;p&gt;Lorem Ipsun&lt;/p&gt;
        &lt;a href="#" class="info"&gt;Read More&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
    &lt;img src="images/1.jpg" alt="Projecto 1" height="290" width="220" /&gt;
    &lt;div class="information hide"&gt;
        &lt;h2&gt;Titulo&lt;/h2&gt;
        &lt;p&gt;Lorem Ipsun&lt;/p&gt;
        &lt;a href="#" class="info"&gt;Read More&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My CSS:</strong></p>
  
  <pre><code>body div.information {
  background: rgba(219, 49, 49, 0.52);
  width: 220px;
  height: 290px;
  position: relative;
  top: -290px;
  }
  </code></pre>
  
  <p>/*  HOVER EFFECT */</p>
  
  <pre><code>.hide {
  display: none;
  }
  
  .show {
  display: block;
  }
  </code></pre>
  
  <p><strong>My JavaScript:</strong></p>
  
  <pre><code>$('img').hover(function() {
      $('.information').addClass("mostrar");
      $('.information').removeClass("hide");      
  });
  </code></pre>
  
  <p>And by the way, if some one can tell me, how to hide the information again when the image is not hover, I appreciate to.</p>