Bricksmotion Components
  • Getting Started
  • Setup
    • Where is my license key?
    • Activate you license within Bricksforge
  • Using components
    • Bricksforge One-Click
    • Bricks Structure
    • Activate "Event Panel"
    • Manual Importing Timelines and Events
    • Locked Classes
    • Reassign Timelines
    • Loading Conditions
  • Components
    • HEROES
      • Hero #1
      • Hero #2
      • Hero #3
      • Hero #4
      • Hero #5
      • Hero #6
      • Hero #7
      • Hero #8
      • Hero #9
      • Hero #10
    • SCROLL SCENES
      • Sticky Sections #1
      • Vertical Scroll #1
      • Scroll Scene #1
      • Scroll Scene #2
      • Scroll Scene #3
      • Scroll Scene #4
      • Scroll Scene #6
      • Scroll Scene #7
      • Scroll Scene #8
      • Scroll Scene #9
    • BUTTONS
      • Button #1
      • Button #2
      • Button #3
      • Button #4
      • Button #5
      • Button #6
      • Button #7
    • TABS
      • Tabs #3
      • Tabs #4
    • PROJECTS
      • Projects #1
      • Projects #2
      • Projects #3
      • Projects #4
      • Projects #5
      • Projects #6
      • Projects #7
    • CTA
      • CTA #1
      • CTA #2
    • CARDS
      • Cards #1
      • Cards #2
    • MENUS
      • Bottom Nav #1
      • Mega Menu #1
      • Full Screen Menu #2
      • Full Screen Menu #3
    • CUSTOM CURSORS
      • Custom Cursor #1
    • LOADING SCREENS
      • Loading Screen #1
      • Loading Screen #2
      • Loading Screen #3
    • TEXT
      • Text Hover #1
      • Split Text #2
    • IMAGE
      • Image Tilt #1
      • Image Reveal #1
      • Image Reveal #2
      • Image Reveal #3
    • PROGRESS BARS
      • Progress Bar #1
      • Progress Bar #2
Powered by GitBook
On this page
  1. Components
  2. CARDS

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.

PreviousCards #1NextMENUS

Last updated 1 year ago