title: make overlay appear on hover button
body: <p>I am trying to make an overlay when I hover a button and I want that when the mouse is out of the button the overlay come back to 0 of opacity, and how can I do it with a ease in out effect ? </p>
  
  <p>Here is my code:</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>  
  $('#hand').mouseover(function(){
   $('.overlay').animate({opacity:0.5}, 100);
  }); </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.content {
   position:absolute;
   width:100%;
   height:100%;
  }
  
  #hand{
   position:absolute;
   width:200px;
   height:200px;
   top:60%;
   left:55%;
   margin-left:-80px;
   margin-top:-100px;
   z-index:2;
  }
  
  .overlay{
   position:absolute;
   background:black;
   width:100%;
   height:100%;
   opacity:0;
  }</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;div class="content"&gt;
  &lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;button id="hand"&gt;PRESS&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>