1

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.

tikeswar101
  • 126
  • 1
  • 5
  • Assign a fixed size to the parent and position the scaled element `absolute` –  May 30 '22 at 18:34
  • 1
    Youtube neither Netflix are scaling the card. They are instead using a separate element that is put on top of the card that you're hovering, and scaling that element instead. – Rickard Elimää May 30 '22 at 18:39
  • @RickardElimää thanks for the response. Could you please give a small example of how to do it? Even if I will scale another element, how do I make sure it stops expanding in the top and left direction when it touches the parent's left or top. – tikeswar101 May 30 '22 at 18:46
  • @ChrisG, I am not getting the desired result. Could you write a simple example of it? – tikeswar101 May 30 '22 at 18:53
  • 2
    I looked at the youtube homepage and you simply need to set the [transform-origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) to the top-left corner, etc. –  May 30 '22 at 22:24

1 Answers1

0

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
fynmnx
  • 571
  • 6
  • 29
  • Hey, thanks. But this is not the exact thing I wanted. You can just open youtube and hover on a thumbnail of a video in the home section. When the hovered element touches the parent's top or left side, it stops expanding in that direction and instead expands on the bottom and right side. – tikeswar101 May 30 '22 at 18:40