Design a Carousel Column Expansion Animation Effect on Hover using CSS Last Updated : 17 Oct, 2024 Comments Improve Suggest changes Like Article Like Report 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 EffectHTML 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 More infoAdvertise with us Next Article Design a Carousel Column Expansion Animation Effect on Hover using CSS S satyamm09 Follow Improve Article Tags : Technical Scripter Web Technologies CSS Technical Scripter 2022 CSS-Questions +1 More Similar Reads How to Design Fade balls loader Animation using CSS ? Minimal Fading balls loader is a basic CSS animation, where the loader animation will be utilized to engage the user until when a specific page or content is fully get loaded in a particular platform. In this article, we will see how to create a loader animation with three balls animation effect whi 2 min read How to create button hover animation effect using CSS ? Minimal rotating backdrop button hovers and click animation is a basic CSS animation effect where when the button hovers, the button's background color changes, and when the button is clicked, it scales down slightly. This animation is implemented using CSS pseudo-elements and transitions. The ::sel 3 min read How to create Animated Hovered 3-D Buttons Effect using CSS ? The hovered 3-D effect on a button is an effect in which the button appears to come toward the user on hovering. These buttons are created using HTML and CSS.Approach: The best way to animate the HTML objects is done by using CSS @keyframes and by setting the transitions at different stages.Example: 3 min read How to Create Circle Loading Animation Effect using CSS ? In this article, we will see how to create a circle-loading animation using HTML and CSS, along with understanding its basic implementation through the example. Generally, Loading Animation is utilized to wait for the content to be fully loaded on the webpage. If some pages don't contain the loader, 6 min read How to bind an animation to a division element using CSS ? In this article, we will learn to bind an animation to a div tag using CSS.A div tag is used to separate the different sections of the contents of the webpage. It makes it very easy for the readers to notice the different sections of the webpage with their specific importance levels on the page. The 3 min read Like