title: jquery hide div with CSS transition effect
body: <p>I have one question about CSS hide transition using jquery hide function.</p>
  
  <p>I have created this <strong><a href="http://codepen.io/shadowman86/pen/pJbeRz" rel="nofollow">DEMO</a></strong> from codepen.io</p>
  
  <p>In this demo you can see the show button. When you click the show button then <code>.test</code> and <code>.user-image</code> div opening with CSS transition effect . </p>
  
  <p>I want to make it when clicked hide button then the <code>.test</code> div hide with CSS transition effect. </p>
  
  <p>Anyone can tell me a little example how can i do that ?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="usr"&gt;Show&lt;/div&gt;
    &lt;div class="test"&gt;
      &lt;div class="hide"&gt;Hide&lt;/div&gt;
      &lt;div class="user-image" style="background-image:url(...);"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
    $('.usr').click(function() {
     $(".test").show();
    });
    $(".hide").click(function() {
      $(".test").hide();
    });
  });
  </code></pre>