i need to have on each card, a flex-direction:column text, and when expanded, the text is displayed normally
THIS IS THE DESIRED EFFECT
THIS IS MY HTML:
.expanding-cards {
display: flex;
width: 100%;
height: 35vh;
align-items: stretch;
flex-direction: row;
gap: 1rem;
}
.expanding-cards h3 {
display: inline-block;
flex-direction: column;
z-index: 3000;
}
.expanding-cards>* {
width: 0;
position: relative;
flex: 1;
transition: all 0.15s ease-out;
}
.expanding-cards>*.expanded {
flex: 3;
}
.expanding-cards>*.expanded h3 {
display: block;
z-index: 3001;
flex-direction: row;
}
.expanding-cards>* img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="row">
<div class="expanding-cards">
<div class="expandcard">
<img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
<h3>
Canada
</h3>
</div>
<div class="expandcard expanded">
<img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
</div>
<div class="expandcard">
<img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
</div>
<div class="expandcard">
<img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
</div>
<div class="expandcard">
<img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
</div>
</div>
</div>
I also have a js file that adds and removes the class "expanded" on click.
2
Answers
writing-mode
., to change the direction of text.crard
is not hovered we keep text towriting-mode: vertical-lr;
, mode which is verticle and, when card is hovered we can usewriting-mode: vertical-lr;
, which is horizontal mode.just need to add text and have to adjust the z-index. I think the following is your desired result