Cards #2

Component Structure

• CD2 COMPONENT (section): This is the main container for the cards, designed to ensure the cards are displayed in a grid layout that adapts to various screen sizes.

• CD2 CONTAINER (container): It holds the individual card elements and is responsible for the grid display, utilizing CSS classes for responsiveness.

• CD2 CARD (div): Each card within the container, featuring a combination of image, text, and button elements. Cards are styled to stand out on hover.

  • CD2 CARD TOP (div): Contains the card number and image. It's designed to visually transform when users interact with the card.

  • CD2 CARD BOT (div): Holds the card's heading and content, including a descriptive text and a call-to-action button.

Animation Structure

CD2 - HOVER: This timeline animation targets the .cd2__card class, revealing additional content and altering the card's appearance upon hover.

• Card Content Expansion: Increases the content wrapper's height to reveal hidden text smoothly.

• Color Transition: Changes the card bottom section's background color to enhance the hover effect visually.

Interactive Events

CD2 - MOUSENTER FLIP & CD2 - MOUSELEAVE FLIP: These events trigger animations that create a flip effect for the card's image and number, adding a dynamic visual cue to indicate interactivity.

• Image Flip: On mouse enter, the card image flips, changing its styling to indicate it's clickable. The reverse occurs on mouse leave.

• Number Styling Change: Similarly, the card number undergoes a styling change on hover, further emphasizing the interactive nature of the card.