title: Using transition to absolute position on hover
body: <p>I'm trying to get a transitional animation on a DIV on hover. However, it's not working. I feel like I'm missing something!</p>
  
  <p><strong><a href="https://jsfiddle.net/hqzshhpt/" rel="nofollow noreferrer">JSFIDDLE DEMO</a></strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="profile__container"&gt;
            &lt;img src="http://i.imgur.com/SGw04SV.jpg" class="profile__list--resume img-fluid" /&gt;
            &lt;div class="profile__button"&gt;
              &lt;h2&gt;Hello World&lt;/h2&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.profile__button {
    display: none;
    background: linear-gradient(to bottom, transparent 0%, #08ca77 60%);
    padding: 120px 15px 15px;
    text-transform: capitalize;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .profile__container:hover .profile__button {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
  </code></pre>