title: How to show text from bottom when Hover
body: <p>I am looking for some css trick to show an element (already hidden) from bottom to a it's normal position.</p>
  <p>This is a screenshot how it should be:
  <a href="https://i.stack.imgur.com/q3d9J.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q3d9J.jpg" alt="simple + hover" /></a></p>
  <p>i did this but it doesn't work as i expected and like what is on the screenshot, when you hover, the text should slide to the top. i made that, but with this method i did, the title is a little bit far from the text bellow ( screenshot )</p>
  <p>Please can somebody help to find a lite solution</p>
  <p><a href="https://i.stack.imgur.com/4SKFd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4SKFd.png" alt="enter image description here" /></a></p>
  <p>Please can somebody help me to find a lite solution</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hebergements__container {
       position: relative;
       display: flex;
       margin: auto;
     width: 30rem;
  }
   .hebergements__container::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: #ccc;
       z-index: 1;
  }
   .hebergements__container:hover .hebergements__desc {
       opacity: 1;
       height: auto;
       -webkit-transition-delay: 0.05s;
       transition-delay: 0.05s;
       -webkit-transition-duration: 0.35s;
       transition-duration: 0.35s;
  }
   .hebergements__container:hover .hebergements__desc, .hebergements__container:hover .hebergements__title {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
  }
   .hebergements__container &gt; img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       overflow: hidden;
  }
   .hebergements__content {
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       min-height: 41.8rem;
       padding-left: 2.5rem;
       padding-bottom: 2.8rem;
       z-index: 1;
  }
   .hebergements__content .hebergements__title {
       margin-bottom: 1rem;
  }
   .hebergements__content .hebergements__desc {
       color: #fff;
  }
   .hebergements__content .hebergements__desc ul:first-child {
       margin-top: 0;
  }
   .hebergements__content .hebergements__startFrom {
       font-size: 1.1rem;
       color: #fff;
       margin-bottom: -0.8rem;
  }
   .hebergements__content .hebergements__price {
       color: #fff;
       font-size: 2.4rem;
       font-weight: fontWeight(extra-bold);
  }
   .hebergements__content .hebergements__price .price-unity {
       font-size: 1.6rem;
  }
   .hebergements__content .hebergements__pension {
       color: #fff;
       font-size: 1rem;
       margin-top: 0.3rem;
  }
   .hebergements__content {
       position: absolute;
       bottom: 0;
       left: 0;
       padding: 2em;
       width: 100%;
       height: 50%;
  }
   .hebergements__content .hebergements__title, .hebergements__content .hebergements__desc {
       transform: translate3d(0, 40px, 0);
  }
   .hebergements__content .hebergements__title {
       transition: transform 0.35s;
  }
   .hebergements__content .hebergements__desc {
       color: rgba(255, 255, 255, 0.8);
       opacity: 0;
       transition: opacity 0.2s, transform 0.35s;
  }
   .hebergements__container:hover .hebergements__desc {
       opacity: 1;
  }
   .hebergements__container:hover .hebergements__title, .hebergements__container:hover .hebergements__desc {
       transform: translate3d(0, 0, 0);
  }
   .hebergements__container:hover .hebergements__desc {
       transition-delay: 0.05s;
       transition-duration: 0.35s;
  }
   </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container product-hebergements"&gt; 
     &lt;div class="hebergements__container"&gt;
                          &lt;img src="https://tympanus.net/Development/HoverEffectIdeas/img/12.jpg" alt="img12"/&gt;
        &lt;div class="hebergements__content"&gt;
           &lt;h2 class="hebergements__title"&gt;
              Votre séjour en Club
           &lt;/h2&gt;
  
           &lt;div class="hebergements__desc"&gt;
              &lt;ul&gt;
                 &lt;li&gt;En chambre ou en appartement&lt;/li&gt;
                 &lt;li&gt;Capacité à partir de 2 personnes jusqu'à 10 personnes.&lt;/li&gt;
                 &lt;li&gt;Formule pension demi pension inclus&lt;/li&gt;
                 &lt;li&gt;Profitez des activités...Services&lt;/li&gt;
              &lt;/ul&gt;
           &lt;/div&gt;
  
           &lt;div class="hebergements__bottom"&gt;
              &lt;div class="hebergements__pension"&gt;
                 8 jours/7 nuits . Pension complète. Prix par pers.
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>