How to make transition in css

Question

.container {
  display: flex;
}

.item {
  width: 150px;
  border: 6px solid red;
  height: 145px;
  overflow: hidden;
  transition: 1s;
}

.item:hover {
    height: 100%;
}

.footer__item {
  background: blue;
}

<div class="container">
  <div class="item">
    <div class="item__data">
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam repudiandae debitis omnis itaque. Dolores quasi aliquid temporibus corporis mollitia sint.
      </div>
      <div class="footer">
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
      </div>
      </div>
  </div>
  <div class="item">
    <div class="item__data">
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam repudiandae debitis omnis itaque. Dolores quasi aliquid temporibus corporis mollitia sint.
      </div>
      <div class="footer">
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
      </div>
      </div>
  </div>
</div>

I want, when i hover the item i want to apply the height: 100%;. The issue is next: When i hover now, the transition is not applied, but if i change the height from 100% to 250px then the transition is working? Why? And how to apply transition for 100% height?

setting the height of container solves it, if thats applicable for your use case. — Ronn Wilder, Dec 27 '20 at 19:25

score 0 · Answer 1 · answered Dec 27 '20 at 18:04

Browers don't support calculations like calculating the height of dynamic elements (usually called reflow). Read this article of reference https://css-tricks.com/using-css-transitions-auto-dimensions/.

Try the below code

.container {
  display: flex;
  transition: all 3s;
}

.item {
  width: 150px;
  transition: all 3s;
}

.content {
  height: 100%;
  border: 6px solid red;
}

.footer {
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease-out;
  overflow: hidden;
}

.item:hover .footer {
  transform: scaleY(1);
}

.footer__item {
  background: blue;
}

<div class="container">
  <div class="item">
    <div class="item__data">
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam repudiandae debitis omnis itaque. Dolores quasi aliquid temporibus corporis mollitia sint.
      </div>
      <div class="footer">
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
      </div>
      </div>
  </div>
  <div class="item">
    <div class="item__data">
      <div class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam repudiandae debitis omnis itaque. Dolores quasi aliquid temporibus corporis mollitia sint.
      </div>
      <div class="footer">
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
        <div class="footer__item">test</div>
      </div>
      </div>
  </div>
</div>

How to make transition in css

1 Answers1