Design a Carousel Column Expansion Animation Effect on Hover using CSS

Last Updated : 17 Oct, 2024

Carousel Column Expansion Animation Effect on Hover in CSS refers to an animation where individual columns (or items) within a carousel expand when hovered over. This effect enhances user interaction by making the hovered column grow in size while smoothly shrinking others, creating a dynamic experience.

Preview :

Creating Carousel Column Expansion Animation Effect

  • HTML Structure: A .card div contains three p elements, each with a span to display text.
  • Positioning: The .card is centered using position: absolute, with translate(-50%, -50%) for alignment.
  • Flexbox Layout: The .card uses flex to arrange p elements, allowing expansion and shrinkage on hover.
  • Hover Effect: On hovering a p element, the flex value changes, expanding that column while shrinking others.
  • Text Rotation: Inside each p, the text is rotated by -90deg, reverting to normal on hover for readability.

Example: This example describes the creation of the Carousel column expansion animation on hover using CSS.

HTML 
<!DOCTYPE html>

<html>

<head>
    <title>
        Design a Carousel Column Expansion 
        Animation effect on Hover using CSS
    </title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .card {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 210px;
            height: 254px;
            border-radius: 4px;
            background: #7FB77E;
            display: flex;
            gap: 5px;
            padding: .4em;
        }

        .card p {
            height: 100%%;
            flex: 1;
            overflow: hidden;
            cursor: pointer;
            border-radius: 2px;
            transition: all .5s;
            background: #7FB77E;
            border: 2px solid #42032C;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .card p:hover {
            flex: 4;
        }

        .card p span {
            min-width: 14em;
            padding: .5em;
            text-align: center;
            transform: rotate(-90deg);
            transition: all .5s;
            text-transform: uppercase;
            color: #42032C;
            letter-spacing: .1em;
        }

        .card p:hover span {
            transform: rotate(0);
        }
    </style>
</head>

<body>
    <div class="card">
        <p>
            <span>GEEKS</span>
        </p>
        <p>
            <span>For</span>
        </p>
        <p>
            <span>GEEKS</span>
        </p>
    </div>
</body>

</html>

Output:

Comment

Explore