VOOZH about

URL: https://www.geeksforgeeks.org/css/design-a-carousel-column-expansion-animation-effect-on-hover-using-css/

⇱ Design a Carousel Column Expansion Animation Effect on Hover using CSS - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

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.

Output:

Comment