Interactive Portfolio Card (hover to flip)

Create a memorable and engaging portfolio with this interactive card that flips over on hover to reveal more information.

This is a high-impact way to add a layer of discovery to your portfolio grid. The front of the card displays a project image, while the back contains the project title, a short description, and a link to view more details.

Screenshot showing a portfolio 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. It provides a creative way to show more information without cluttering the initial view of your portfolio, inviting user interaction to discover the details on the "back" of the card.

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.
Interactive Discovery: Engages users by encouraging them to hover over portfolio items to learn more.

Code Breakdown

HTML Structure

The card's structure has three main parts. The outermost div (.flip-card) acts as a container to create the 3D space. The direct child (.flip-card-inner) is the element that will be rotated. Finally, inside this inner container are the two faces of the card: .flip-card-front and .flip-card-back.

CSS Styling

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

perspective: This is applied to the static outer container. It gives the child elements a 3D space to transform within, creating the sense of depth.
transform-style: preserve-3d: This is applied to the inner element that rotates. It tells the browser that its children (the front and back faces) should be positioned in 3D space, not flattened onto a 2D plane.
transform: rotateY(180deg): On hover, this is applied to the .flip-card-inner to create the rotation animation. This same transformation is applied to the back face (.flip-card-back) by default, so that it starts off facing away from the viewer.
backface-visibility: hidden: This property is applied to both the front and back faces. It makes the "back" of an element transparent, so when the front face flips away from view, you don't see a mirrored version of it (you see the back face instead).

Code

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

<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=Mobile+UI" alt="UI screenshot for the Meridian Finance app." class="flip-card-image">
            </div>
            <div class="flip-card-back">
                <h3 class="flip-card-back-title">Meridian Finance App</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=Branding" alt="Branding materials for a coffee company." class="flip-card-image">
            </div>
            <div class="flip-card-back">
                <h3 class="flip-card-back-title">Canyon Coffee</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