title: How to hide the complete hover animation
body: <p>Me and my friend recently have a problem with a portfolio case, the hove over animation doesnt go back properly to the original picture. How can we fix this? 
  See: <a href="http://rick.arjendendulk.com" rel="nofollow noreferrer">The website</a></p>
  
  <pre><code>&lt;div class="col-md-3 col-sm-6"&gt;
      &lt;div class="case"&gt;
          &lt;img src="img/2.jpg" class="img-responsive"&gt;
          &lt;div class="case_content"&gt;
              &lt;div class="case_text"&gt;
                  &lt;h3&gt;Market Download Buttons&lt;/h3&gt;
                  &lt;h4&gt;UI Design&lt;/h4&gt;
              &lt;/div&gt;
              &lt;a class="venobox" href="img/2.jpg"&gt;&lt;p class="balk"&gt;View Dribbble Shot&lt;/p&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  .cases {
      max-width: 100%;
      padding: 0;
  }
  
  .case {
    overflow: hidden;
    position: relative;
  }
  
  .case_content {
    background-color: rgba(54,54,62,0.99);
    position: absolute;
    bottom: -100%;
    width: 100%;
    height: 100%;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    opacity: 1;
  }
  
  .case_text {
      width: 80%;
      padding: 0 0 0 5%;
  }
  </code></pre>