So I have a flexbox container who contain multiple cards (flexbox children).
When the user hover the card, the card flip and he can see some text.
Sometimes, the text is overflowing the card and I want the card to grow and to be above the other cards (who are not hovered).
I managed to make grow the card but when it grows its always behind the other flexbox childrens.
I tried with z-index on the back side of the card but it does not work.
What am I missing?
PS: In order to reproduce the problem you need to have 2 lines of cards.
.container-sdg {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
gap: 5px;
}
.flip-card {
background-color: transparent;
width: 150px;
min-height: 150px;
perspective: 1000px;
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: auto;
min-height: 150px;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
color: white;
transform: rotateY(180deg);
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 5px;
border: 1px solid #000;
z-index: 1;
}
.flip-card-back p {
letter-spacing: 1.3px;
font-size: 14px;
}
.container-sdg .shape {
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.shape img {
object-fit: cover;
}<div >
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b"">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
</div>CodePudding user response：
If you are looking for the card to grow above other cards when hovering, then you need to add the following hover css to the card:
.flip-card:hover{
z-index:1;
}
CodePudding user response：
You can try using fit-content width on your card-back when hovered. Also, add z-index: 1; to ensure it's placed over the default layer the cards are currently on. See Test Card
.container-sdg {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
gap: 5px;
}
.flip-card {
background-color: transparent;
width: 150px;
min-height: 150px;
perspective: 1000px;
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: auto;
min-height: 150px;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
color: white;
transform: rotateY(180deg);
padding: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 5px;
border: 1px solid #000;
z-index: 1;
}
.flip-card-back p {
letter-spacing: 1.3px;
font-size: 14px;
}
.container-sdg .shape {
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.shape img {
object-fit: cover;
}
.flip-card-front ~ .flip-card-back:hover {
width: fit-content;
transition: transform .6ms ease-in-out;
height: inherit;
z-index: 1;
}<div >
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p> Test 1 </p>
<p> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p> Test 1</p>
<p> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div > <p style="position: absolute;">TEST THIS CARD</p>
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p> Test 1 Overflow Overflow Overflow Overflow Overflow Overflow OverflowOverflowOverflowOverflowOverflowOverflowOverflowOverflowOverflow</p>
<p> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b"">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b"">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
<div >
<div >
<div >
<div style="background-color:#e5243b">
<img src="~/img/SDG/SDG1.png">
</div>
</div>
<div style="background-color:#e5243b">
<p>> Test 1</p>
<p>> Test 2</p>
</div>
</div>
</div>
</div>