Work Sample Card

Create a visually striking portfolio grid with this image-centric card for showcasing your work samples.

This component is designed to be highly scannable, making it perfect for the main page of a portfolio. It overlays the project's title and key skills/technologies directly onto the cover image, keeping the focus on the visuals.

Screenshot of portfolio cards with text and tags overlaid on images.

Get Source Code Preview

About this Component

This card template makes the project's cover image the entire background of the component. A CSS gradient is applied to the bottom portion of the image to create a semi-transparent dark area, which ensures that the overlaid white text is always clear and legible. On hover, the image subtly zooms in to provide an engaging interactive cue.

Features

Image-Centric Design: The project image takes up the full space of the card for maximum visual impact.
Overlaid Tags: Technology or skill tags are displayed directly on the card, giving immediate context to your work.
Legible Text Overlay: A CSS gradient overlay ensures that the title and tags are readable against any image.
Simple and Clickable: The entire card is a single, large, clickable link, making it very user-friendly.

Code Breakdown

HTML Structure

Each card is a single a tag with the class .work-sample-card, making the entire component clickable by default. Inside this link, the project's cover img is the first element, followed by a div for the content overlay. This overlay contains the project's h3 title and a final div that holds the list of tags.

CSS Styling

The main anchor tag (.work-sample-card) is a flex container that uses justify-content to push the content overlay to the bottom of the card. It is also set to position: relative to act as the positioning context for its children. The image (.work-sample-image) is positioned absolutely with a z-index of 0 to fill the entire background. The content div is also set to position: relative with a z-index of 1, which layers it on top of the background image, making it visible. This `div` has a linear-gradient() background, which creates the semi-transparent scrim effect for the text.

Code

Here's the complete, self-contained code. Simply replace the images and text to build your portfolio grid.

<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;
}

/* === Work Sample Card Styles === */
.work-sample-card {
    --work-radius: 12px;
    --work-height: 280px;
    
    position: relative; /* This is the positioning context */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes content down */
    height: var(--work-height);
    border-radius: var(--work-radius);
    overflow: hidden;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-decoration: none;
}

/* Background image */
.work-sample-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0; /* Placed at the back of the stacking context */
    transition: transform 0.3s ease;
}
.work-sample-card:hover .work-sample-image {
    transform: scale(1.05);
}

/* Content overlay */
.work-sample-content {
    position: relative; /* Lifts this content above the z-index: 0 image */
    z-index: 1;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.7) 40%, transparent 80%);
}

.work-sample-title {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.75rem;
}

.work-sample-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.work-sample-tag {
    font-size: 0.8rem;
    font-weight: 500;
    background-color: rgba(255,255,255,0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.3);
}

</style>

<div class="cards-grid-container">
    
    
    <a href="#" class="work-sample-card" aria-labelledby="work-title-1">
        <img class="work-sample-image" src="https://placehold.co/800x560/ec4899/ffffff/png?text=Mobile+UI" alt="UI screenshot for the Meridian Finance app.">
        <div class="work-sample-content">
            <h3 class="work-sample-title" id="work-title-1">Meridian Finance App</h3>
            <div class="work-sample-tags">
                <span class="work-sample-tag">UI Design</span>
                <span class="work-sample-tag">UX Research</span>
                <span class="work-sample-tag">iOS</span>
            </div>
        </div>
    </a>

<a href="#" class="work-sample-card" aria-labelledby="work-title-2">
        <img class="work-sample-image" src="https://placehold.co/800x560/f59e0b/ffffff/png?text=Branding" alt="Branding materials for a coffee company.">
        <div class="work-sample-content">
            <h3 class="work-sample-title" id="work-title-2">Canyon Coffee Roasters</h3>
            <div class="work-sample-tags">
                <span class="work-sample-tag">Branding</span>
                <span class="work-sample-tag">Logo Design</span>
                <span class="work-sample-tag">Packaging</span>
            </div>
        </div>
    </a>
    
    
    <a href="#" class="work-sample-card" aria-labelledby="work-title-3">
        <img class="work-sample-image" src="https://placehold.co/800x560/06b6d4/ffffff/png?text=Website" alt="Screenshot of the Helios Real Estate website.">
        <div class="work-sample-content">
            <h3 class="work-sample-title" id="work-title-3">Helios Real Estate Website</h3>
            <div class="work-sample-tags">
                <span class="work-sample-tag">Web Design</span>
                <span class="work-sample-tag">Webflow</span>
                <span class="work-sample-tag">CMS</span>
            </div>
        </div>
    </a>
    
</div>

View Output