How to Transition Height from 0 to Auto using CSS?

Last Updated : 19 Nov, 2024

To transition height from 0 to auto in CSS, apply max-height with a transition effect. Using max-height allows for smooth expansion and collapse, making the element responsive while maintaining the animated effect.

Creating Height Transition using max-height

To create a height transition from 0 to auto in CSS using max-height, set max-height to 0 initially and transition to a large value (e.g., 500px). This simulates the auto behavior, creating a smooth expanding or collapsing effect.

Syntax

transition: property duration timing-function delay;

Example 1: Here we creates a smooth height transition effect for a dropdown menu. When hovering over the menu, the max-height gradually expands, revealing a list of items with ease-in animation.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        #menu #list {
            max-height: 0;
            transition: max-height 0.50s ease-out;
            overflow: hidden;
            background: #d5d5d5;
        }

        #menu:hover #list {
            max-height: 500px;
            transition: max-height 0.50s ease-in;
        }
    </style>
</head>

<body>
    <h3>
        Creating Smooth Height Transition with max-height
    </h3>
  
    <div id="menu">
        <a>Hover to increase the height.</a>
        <ul id="list">
            <li>DSA</li>
            <li>Algorithms</li>
            <li>Competitive Programming</li>
            <li>Web Technologies</li>
            <li>Interview Preparation</li>
        </ul>
    </div>
</body>

</html>

Output

transition height from 0 to auto

Example 2: Here we creates four collapsible containers with smooth height transitions. Each container expands when hovered, revealing its content, with different heights and background colors for visual distinction.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .wrapper #first {
            max-height: 0px;
            width: 15rem;
            transition: max-height 0.50s ease-out;
            overflow: hidden;
            background: slateblue;
            text-align: center;
        }

        .wrapper:hover #first {
            max-height: 500px;
            transition: max-height 0.50s ease-in;
        }

        .wrapper #second {
            max-height: 0px;
            width: 15rem;
            transition: max-height 0.50s ease-out;
            overflow: hidden;
            background: pink;
            text-align: center;
        }

        .wrapper:hover #second {
            max-height: 600px;
            transition: max-height 0.50s ease-in;
        }

        .wrapper #third {
            max-height: 0px;
            width: 15rem;
            transition: max-height 0.50s ease-out;
            overflow: hidden;
            background: grey;
            text-align: center;
        }

        .wrapper:hover #third {
            max-height: 700px;
            transition: max-height 0.50s ease-in;
        }

        .wrapper #fourth {
            max-height: 0px;
            width: 15rem;
            transition: max-height 0.50s ease-out;
            overflow: hidden;
            background: burlywood;
            text-align: center;
        }

        .wrapper:hover #fourth {
            max-height: 800px;
            transition: max-height 0.50s ease-in;
        }
    </style>
</head>

<body>
    <h3>
        Creating transition height from 0 to auto
    </h3>
  
    <div class="wrapper">
        <a>Hover to Reveal the first box.</a>
        <div id="first">
            Hello Geek!!
            <br>
            This is the first Container
            <br>
            This is the first box content.
        </div>
    </div>
    <div class="wrapper">
        <a>Hover to Reveal the Second box.</a>
        <div id="second">
            Hello Geek!!
            <br>
            This is the Second Container
            <br>
            This is the Second box content.
        </div>
    </div>
    <div class="wrapper">
        <a>Hover to Reveal the Third box.</a>
        <div id="third">
            Hello Geek!!
            <br>
            This is the Third Container
            <br>
            This is the Third box content.
        </div>
    </div>
    <div class="wrapper">
        <a>Hover to Reveal the Fourth box.</a>
        <div id="fourth">
            Hello Geek!!
            <br>
            This is the Fourth Container
            <br>
            This is the Fourth box content.
        </div>
    </div>
</body>

</html>

Output

transition height from 0 to auto using CSS

How to Add Transition on Hover Using CSS?

triashabiswas

Improve

Article Tags :

How to Transition Height from 0 to Auto using CSS?

Creating Height Transition using max-height

Syntax

Similar Reads

Thank You!

What kind of Experience do you want to share?