I have observed on Youtube when you hover over the thumbnail, it scales. The interesting thing is the element on either end when getting scaled doesn't go out of its parent. (Hover on the thumbnail of youtube videos). A similar effect can be seen on the Netflix website.
I want to create the same effect.
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
.container {
padding-block: 2rem;
display: flex;
gap: 1rem;
justify-content: center;
}
.card {
background-color: red;
flex: 0 0 calc(25% - 1rem);
aspect-ratio: 1/1;
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.4) translateZ(10px);
background-color: rgba(255, 0, 0, 0.6);
}
When I hover over the card on either end, it gets bigger but goes out of its parent element.
You can just add an overflow hidden to the parent. I assume you want the scaling to remain inside the parent container.
.container {
padding-block: 2rem;
display: flex;
gap: 1rem;
justify-content: center;
border: 1px solid blue;
overflow:hidden;
}
.card {
background-color: red;
flex: 0 0 calc(25% - 1rem);
aspect-ratio: 1/1;
transition: transform 0.3s;
}
.card:hover {
transform: scale(1.4) translateZ(10px);
background-color: rgba(255, 0, 0, 0.6);
}<div class="container"> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div