He observado en Youtube cuando pasas el cursor sobre la miniatura, se escala. Lo interesante es que el elemento en cada extremo cuando se escala no sale de su padre. (Pase el cursor sobre la miniatura de los videos de youtube). Un efecto similar se puede ver en el sitio web de Netflix.
Quiero crear el mismo efecto.
<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); }Cuando paso el cursor sobre la tarjeta en cualquiera de los extremos, se hace más grande pero sale de su elemento principal.
Simplemente puede agregar un desbordamiento oculto al padre. Supongo que desea que la escala permanezca dentro del contenedor principal.
.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