Lorem ipsum dolor sit amet
Vivamus interdum nec lorem
Fusce ac tristique eros
<div class="demo">
<div class="contenu-demo">
<img src='image.jpg' alt>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="contenu-demo">
<img src='image.jpg' alt>
<p>Vivamus interdum nec lorem</p>
</div>
<div class="contenu-demo">
<img src='image.jpg' alt>
<p>Fusce ac tristique eros</p>
</div>
</div>
*{box-sizing: border-box}
.demo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
gap: 1rem;
}
.contenu-demo {
isolation:isolate;
border-radius: .75rem;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
overflow: hidden;
display:grid;
transition:background-size .8s;
background:linear-gradient(to top,#000000d9,#0000) bottom center/100% 0% no-repeat;
}
.contenu-demo>*{
grid-area:1/1
}
.contenu-demo img {
mix-blend-mode: overlay;
aspect-ratio: 3 / 2;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.contenu-demo:hover{
background-size: 100% 3rem
}
.contenu-demo:hover p{
transform: unset
}
.contenu-demo p{
font-size: .875rem;
padding: 1rem;
pointer-events: none;
will-change: transform;
transition: transform .4s;
color: white;
place-self: end start;
transform: translatey(100%);
}