Interactive Card Hover Effects with CSS

The Concept: Flipping Cards with Depth

We'll be creating a set of cards that each have two "faces" - when you hover over them, the front face slides up while the back face slides down into view, creating a nice flipping effect. Here's what makes this design special:

• 3D perspective for realistic movement

• Smooth transitions with CSS animations

• Color changes on hover for visual feedback

• Responsive design that works on different screen sizes

The HTML Structure

Our cards are built with clean, semantic HTML:

html

<div class="container">
    <div class="card">
        <div class="face face1">
            <div class="content">
                <i class="fas fa-paint-brush"></i>
                <h2>Design</h2>
            </div>
        </div>
        <div class="face face2">
            <div class="content">
                <p>Lorem ipsum dolor sit amet...</p>
                <a href="#">Read More</a>
            </div>
        </div>
    </div>
    <!-- More cards -->
</div>

Each card has two faces:

1. face1: The front face with an icon and title

2. face2: The back face with description and call-to-action

The CSS Magic

Here's where the real fun begins. We're using several advanced CSS techniques:

1. CSS Variables for Consistency

We define variables at the root level for easy theming:

css

:root {
    --primary-color: #ff0057;
    --secondary-color: #333;
    --text-color: #fff;
    --card-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    --transition-speed: 0.6s;
    --border-radius: 10px;
}

2. The Flip Animation

The key to our effect is the transform property combined with transition:

css

.container .card .face.face1 {
    transform: translateY(110px);
}
.container .card .face.face2 {
    transform: translateY(-110px);
}
.container .card:hover .face.face1,
.container .card:hover .face.face2 {
    transform: translateY(0);
}

3. Additional Hover Effects

We've added some extra polish:

• The icon does a 360° spin

• The content scales up slightly

• The background color changes

• The "Read More" button has its own hover effect

Interactive Card Hover Effects with CSS | Source Code

See the Pen Interactive Card Hover Effect by Grapdroad (@grapdroad) on CodePen.