CODEWITHSUNDEEP
cssflexbox
Jose
Jose

Reputation: 5200

Make flex item grow past (larger) than flex container

I'm trying to simulate the hover effect that Netflix uses on it's "row of cards" that display the shows that are currently available to watch.

When you hover on a card, the item grows (seemingly) larger than the size of the row that it's contained in.

I'm using flexbox and have a .row and .card items inside the row. I've tried using transform: scale(1.5) and this works except it does not grow the card larger than the size of the row. Any advice?

Upvotes: 0

Views: 1401

Answers (1)

Alex - DJDB
Alex - DJDB

Reputation: 740

Maybe I have not understand well your problem. When I tried on JsFiddle, I have the result you seem to wish. Element hovered is bigger than the parent element "row". 

.row{
  position: relative;
  display: flex;
  background: blue;
}

.cards{
  width: 50px;
  height: 50px;
  background: red;
  margin: 10px;
}

.cards:hover{
  transform: scale(1.5);
}
<div class="row">
  <div class="cards">1</div>
  <div class="cards">1</div>
  <div class="cards">1</div>
</div>

https://jsfiddle.net/nesquimo/vbb8td62/1/

Upvotes: 2

Related Questions