Flip Card (Front/Back)

Create a memorable and engaging user experience with this interactive card that flips over on hover to reveal content on its back side.

This high-impact effect is perfect for portfolios, Q&A sections, or any scenario where you want to add a layer of discovery. The front can display an image or question, while the back reveals details and a call-to-action.

Screenshot of a card flipping from its front image to its back details.

Get Source Code Preview

About this Component

This is a CSS-only component that uses 3D transforms to create a realistic flipping animation. By nesting a few simple elements, we can create two distinct "faces" for the card and use a hover state to trigger the rotation.

Features

CSS 3D Flip Effect: A smooth, hardware-accelerated 3D rotation is handled entirely by CSS, requiring no JavaScript.
Two-Sided Card: Provides a clear front and back structure, perfect for showing an image first, then revealing details on hover.
Engaging Interaction: Encourages user discovery by hiding secondary information on the back of the card until the user interacts with it.

Code Breakdown

HTML Structure

The card requires three nested div elements. The outermost div class="flip-card" creates the 3D space. The middle div (.flip-card-inner) is the element that actually performs the flip animation. Finally, two child divs (.flip-card-front and .flip-card-back) represent the two faces of the card.

CSS Styling

The 3D flip effect relies on a few core CSS properties:

perspective: Applied to the static outer container, this property gives child elements a 3D space to transform within.
transform-style: preserve-3d: Applied to the inner element that rotates, this tells its children (the front and back faces) to exist in that 3D space.
transform: rotateY(180deg): On hover, this is applied to the .flip-card-inner to create the flip animation. The back face, .flip-card-back, is also given this transform by default so that it starts off facing away from the user.
backface-visibility: hidden: Applied to both front and back faces, this property makes the reverse side of an element invisible, preventing a mirrored version of the front from showing through when the card is flipped.

Code

Here's the complete, self-contained code. Simply update the image on the front and the text content on the back to build your interactive component.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === Grid Container for the Cards === */
.cards-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Flip Card Styles === */
.flip-card {
    background-color: transparent;
    width: 100%;
    height: 400px;
    perspective: 1000px; /* Gives the 3D space for the flip */
}

/* This container does the flipping */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 12px;
}
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Front and back sides */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* For Safari */
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
}

/* Style the front side */
.flip-card-front {
    background-color: #e5e7eb;
}
.flip-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Style the back side */
.flip-card-back {
    background-color: #1f2937;
    color: white;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.flip-card-back-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}
.flip-card-back-description {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
.flip-card-back-link {
    background-color: #ffffff;
    color: #1f2937;
    font-weight: 500;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}
.flip-card-back-link:hover {
    background-color: #4f46e5;
    color: #ffffff;
}

</style>

<div class="cards-grid-container">
    
    
    <div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                
                <img src="https://placehold.co/640x800/ec4899/ffffff/png?text=Project+A" alt="Cover image for Project A" class="flip-card-image">
            </div>
            <div class="flip-card-back">
                <h3 class="flip-card-back-title">Project Alpha</h3>
                <p class="flip-card-back-description">A native iOS and Android application for managing personal finances.</p>
                <a href="#" class="flip-card-back-link">View Project</a>
            </div>
        </div>
    </div>

<div class="flip-card">
        <div class="flip-card-inner">
            <div class="flip-card-front">
                
                <img src="https://placehold.co/640x800/f59e0b/ffffff/png?text=Project+B" alt="Cover image for Project B" class="flip-card-image">
            </div>
            <div class="flip-card-back">
                <h3 class="flip-card-back-title">Project Beta</h3>
                <p class="flip-card-back-description">Complete branding and packaging design for an artisanal coffee roaster.</p>
                <a href="#" class="flip-card-back-link">View Project</a>
            </div>
        </div>
    </div>
</div>

View Output