How to display text when card is expanded? - Html

ChrisRD
March 27, 2023
204 views
0 votes
2 Answers

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.

Tags: css html

Answers

You can use css property writing-mode., to change the direction of text.
please see below css, where the crard is not hovered we keep text to writing-mode: vertical-lr;, mode which is verticle and, when card is hovered we can use writing-mode: vertical-lr;, which is horizontal mode.
Beloew is css version, you can easily convert it to scss.
I have also corrected few missing css.

.expanding-cards h3 {
  position: absolute;
  top: 15px;
  left: 15px;
  transition: all 0.15s ease-out;
  writing-mode: vertical-lr;
}

.expanding-cards .expandcard:hover h3 {
  writing-mode: horizontal-tb;
}

.expanding-cards {
  display: flex;
  width: 100%;
  height: 35vh;
  align-items: stretch;
  flex-direction: row;
  gap: 1rem;
}

.expanding-cards h3 {
  position: absolute;
  top: 15px;
  left: 15px;
  transition: all 0.15s ease-out;
  writing-mode: vertical-lr;
}

.expanding-cards>* {
  width: 0;
  position: relative;
  flex: 1;
  transition: all 0.15s ease-out;
}

.expanding-cards .expandcard:hover {
  flex: 3;
}

.expanding-cards .expandcard:hover h3 {
  writing-mode: horizontal-tb;
}

.expanding-cards>* img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

<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">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>
        Canada
      </h3>
    </div>
    <div class="expandcard">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>
        Canada
      </h3>
    </div>
    <div class="expandcard">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>
        Canada
      </h3>
    </div>
    <div class="expandcard">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>
        Canada
      </h3>
    </div>
  </div>

</div>

just need to add text and have to adjust the z-index. I think the following is your desired result

.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:hover {
  flex: 3;
}

.expanding-cards>*.expanded:hover h3 {
  display: block;
  z-index: 3001;
  flex-direction: row;
}

.expanding-cards>*.expanded h3 {
  display: none;
  z-index: 3001;
  flex-direction: row;
}

.expanding-cards>* img {
  position: absolute;
  inset: 0;
z-index:-1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="row">
  <div class="expanding-cards">
    <div class="expandcard expanded">
      <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">
      <h3>Canada</h3>
    </div>
    <div class="expandcard expanded">
      <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">
      <h3>Canada</h3>
    </div>
    <div class="expandcard expanded">
      <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png">
      <h3>Canada</h3>
    </div>
  </div>

</div>

Please signup or login to give your own answer.

Click here to cancel reply.

How to display text when card is expanded? – Html

Answers