Machen Sie Flex-Artikel vorbei (größer) als Flex-Container

Question

Ich versuche, den Hover-Effekt zu simulieren, den Netflix auf seiner "Reihe von Karten" verwendet, die die Shows anzeigen, die derzeit zu sehen sind.

Wenn Sie auf einer Karte schweben, wächst das Element (scheinbar) größer ist als die Größe der Folge, dass es in enthalten ist.

ich Flexbox bin mit und haben ein .row und .card Elemente innerhalb der Reihe. Ich habe versucht mit transform: scale(1.5) und das funktioniert, außer es wächst nicht die Karte größer als die Größe der Zeile. Irgendein Rat?

Answer 1

Vielleicht habe ich Ihr Problem nicht gut verstanden. Als ich JsFiddle ausprobiert habe, habe ich das gewünschte Ergebnis. Element hovered ist größer als das Elternelement "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/