skip to Main Content

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


    • 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>
    Login or Signup to reply.
  1. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search