How to show text from bottom when Hover - html

Question

I am looking for some css trick to show an element (already hidden) from bottom to a it's normal position.
This is a screenshot how it should be:
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 )
Please can somebody help to find a lite solution
Please can somebody help me to find a lite solution
.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 > 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;
}
<div class="container product-hebergements">
<div class="hebergements__container">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/12.jpg" alt="img12"/>
<div class="hebergements__content">
<h2 class="hebergements__title">
Votre séjour en Club
</h2>
<div class="hebergements__desc">
<ul>
<li>En chambre ou en appartement</li>
<li>Capacité à partir de 2 personnes jusqu'à 10 personnes.</li>
<li>Formule pension demi pension inclus</li>
<li>Profitez des activités...Services</li>
</ul>
</div>
<div class="hebergements__bottom">
<div class="hebergements__pension">
8 jours/7 nuits . Pension complète. Prix par pers.
</div>
</div>
</div>
</div>
</div>

Answer 1

I'm not using my computer right now but, I think, to create your animation, you have to create a #keyframe. Basically, your 3 lines are hidden, and, when you hover it, a new style must be added, with the keyframe (and the visibility visible).
Your keyframe must contain something like :
Transform: translateX (you have to make your div go to the top)
Animation fill mode forward
This is not complete, but you got the idea.

Answer 2

Here is my try
.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 > 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;
overflow: hidden; /* added this line */
}
.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;
height: 2rem; /* added this line */
}
.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;
height: auto; /* added this line */
}
<div class="container product-hebergements">
<div class="hebergements__container">
<img src="https://tympanus.net/Development/HoverEffectIdeas/img/12.jpg" alt="img12"/>
<div class="hebergements__content">
<h2 class="hebergements__title">
Votre séjour en Club
</h2>
<div class="hebergements__desc">
<ul>
<li>En chambre ou en appartement</li>
<li>Capacité à partir de 2 personnes jusqu'à 10 personnes.</li>
<li>Formule pension demi pension inclus</li>
<li>Profitez des activités...Services</li>
</ul>
</div>
<div class="hebergements__bottom">
<div class="hebergements__pension">
8 jours/7 nuits . Pension complète. Prix par pers.
</div>
</div>
</div>
</div>
</div>

Answer 3

Instead of debugging your code trying to workaround/find your errors, I created a 'generic' animated card based on your code and requirement.
The entire mechanism hinges on flexbox behaviour:
FBL column containers, for easy positioning
FBL content moved to flex-end. This forces all elements to the bottom of the card.
FBL 'flex-basis' animated .header from 0% to 40%. As the un-hovered value is 0% all elements reside at the bottom of the card. When changed to a higher value (< 40%), the .header grows, pushing itself towards the top of the card. This is the single main behaviour we need.
Animating the properties of various elements from some initial value to a hover state value moves/shows/sizes the end result.
BONUS some card hover/click action I always use.
I have commented the code, which makes reading a bit easier...
The Snippet
/* for debugging, remove/disable when done */
/* * { outline: 1px dashed }/**/
/***********************/
/* element definitions */
/***********************/
.card {
position: relative;
margin: 0 auto;
width: 30rem; /* not responsive!! */
aspect-ratio: 1/1;
}
.card > * { /* picture and content */
position: absolute;
inset: 0; /* stretched to fill parent (T/R/B/L) */
}
/* background picture under all content, stretched to fit parent */
.card .bg-pic { z-index: -1 }
.card .bg-pic img { display: block; width: 100%; height: 100%; object-fit: cover }
/* Flexbox container over card background image */
.card .inner {
z-index: 1;
display: flex; flex-flow: column wrap;
padding: 1rem;
justify-content: flex-end; /* move all elements to .inner bottom */
}
.card .inner > * {
/* all card .inner elements are FBL column containers */
display: flex; flex-flow: column wrap;
}
/********************************/
/* All hover animation settings */
/********************************/
/*
element defaults before animation with transitions set,
followed by animation settings.
*/
.card {
/* trasition properties, delay, behaviour */
--tr-f: all 0.05s ease-in-out; /* fast transition */
--tr-s: all 0.35s ease-in-out; /* slow */
}
.card .header {
flex-basis: 0%; /* makes it shrink to HTML default */
font-size: 1.5rem;
transition: var(--tr-f);
}
.card:hover .header {
/* When content/footer tend to wrap, fiddle with below 'flex-basis' < 40% */
flex-basis: 40%; /* makes it stretch to fill 40% */
font-size: 2rem;
text-align: center;
}
.card .bg-pic {
opacity: 0.5;
transition: var(--tr-s);
}
.card:hover .bg-pic {
opacity: 1;
}
.card .content {
/* hides fading text under pricing */
overflow: hidden; /* disable to test */
height : 0px;
opacity: 0;
transition: var(--tr-s);
}
.card:hover .content {
height : auto;
opacity: 1;
}
/*************/
/* Eye-candy */
/*************/
body { font-size: 1rem }
ul, li { padding: 0; list-style-type: none }
.card > * {
/* obfuscate picture for testing */
background-color: hsl(0,0%,0%,.5);/* remove me */
color: hsl(0,0%,100%,1);
cursor: pointer;
}
.title { font-size: 1.5rem }
.prix { font-size: 2.4rem; font-weight: bold }
.unit { font-size: 1.6rem }
/* BONUS: card hover/click animation */
.card {
/* GMD elevation 1dp */
box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
0px 1px 1px 0px rgba(0,0,0,.14),
0px 1px 3px 0px rgba(0,0,0,.12);
}
.card:hover {
transform: scale(1.01);
/* GMD elevation 3dp */
box-shadow: 0px 3px 3px -2px rgba(0,0,0,.20),
0px 3px 4px 0px rgba(0,0,0,.14),
0px 1px 8px 0px rgba(0,0,0,.12);
}
.card:active:not(:focus), .card:focus {
transform: scale(1);
}
<div class="card">
<div class="bg-pic"><img src="https://picsum.photos/320" alt="" aria-hidden="true" /></div>
<div class="inner">
<div class="header">
<div>Votre séjour en Club</div>
</div>
<div class="content">
<ul>
<li class="title">some alt title</li>
<li>En chambre ou en appartement</li>
<li>Capacité à partir de 2 personnes jusqu'à 10 personnes.</li>
<li>Formule pension demi pension inclus</li>
<li>Profitez des activités...Services</li>
</ul>
</div>
<div class="footer">
<span>A partir de</span>
<span class="prix">529<span class="unit">€</span></span>
<div>8 jours/7 nuits . Pension complète. Prix par pers.</div>
</div>
</div>
</div>