title: Text animation glitch on hover
body: <p>I'm trying to create an animation, which moves text up and shows some content when hovered over a card. When hovered over the card, the animation works as expected but when the cursor is placed on top of the text, there's this weird glitch and the text keeps moving up and down. </p>
  
  <p>I've put this up on : <a href="https://codepen.io/anon/pen/qGwpaG" rel="nofollow noreferrer">https://codepen.io/anon/pen/qGwpaG</a></p>
  
  <p>My code</p>
  
  <p>HTML</p>
  
  <pre><code> &lt;section class="section" id="black"&gt;
      &lt;div class="container"&gt;
        &lt;p class="display-4 d-flex justify-content-center spacing text-center light bold mt-3" id="case-head"&gt; Make something you love.&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="container"&gt;
        &lt;div class="row no-gutters"&gt;
  
  
        &lt;div class="col-lg-4"&gt;
            &lt;a href="blog.html" class="hover"&gt;
  
              &lt;div class="image"&gt;
                &lt;img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" class=""&gt;
              &lt;/div&gt;
            &lt;p class="img-text color bold"&gt;Sample - 1&lt;/p&gt;
            &lt;p class="img-description light"&gt;Lorem Ipsum  &lt;/p&gt;
            &lt;i class="fas fa-long-arrow-alt-right img-description arrow"&gt;&lt;/i&gt; 
             &lt;/a&gt;
          &lt;/div&gt;
    &lt;/section&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    .img-text {
      padding: 10px;
      position: absolute;
      bottom: 0px;
      left: 16px;
      font-size: 30px;
  
    }
  
    .img-description{
  
  
      position: absolute;
      padding: 10px;
      bottom: 35px;
      left: 16px;
      font-size: 20px;
      color: white;
  
    }
  
    .image {
      position:relative;
     width: 100%;
     height: auto;
  }
  .image img {
      width:100%;
      vertical-align:top;
  }
  .image:after {
      content:'\A';
      position:absolute;
      width:100%; height:100%;
      top:0; left:0;
      background:rgba(0,0,0,0.8);
      opacity:0;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
  }
  .image:hover:after {
      opacity:1;
  }
  .color
  {
    color: white!important;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$('.img-description').hide();
  
  $(".hover").mouseover(function() {
      $(this).find(".img-text").animate({ bottom: 100 },100);
      $(this).find('.img-description').show();
  })
  
  $(".hover").mouseout(function() {
      $(this).find(".img-text").animate({ bottom: 8 });
      $(this).find('.img-description').hide();
  })
  </code></pre>