Overlay Text on Image Card

Create visually compelling links with this template that places text directly on top of a full-card background image.

This "hero" style card is perfect for grabbing user attention and works well for featured articles, travel destinations, or portfolio highlights where a strong visual is important.

Screenshot of three cards with text overlaid on dramatic landscape photos.

Get Source Code Preview

About this Component

The main feature of this card is its layered structure, achieved through CSS positioning. An image serves as the bottom layer, a semi-transparent gradient is layered on top to ensure the text is readable, and the text content itself forms the top layer. The result is a dynamic, modern card that prioritizes imagery.

Features

Gradient Overlay: A built-in linear gradient, created with a CSS pseudo-element, darkens the bottom of the card to guarantee high-contrast, readable text over any image.
Hover Zoom Effect: A subtle zoom animation on the background image adds a touch of interactive polish.
Layered with CSS: Makes use of the CSS position and z-index properties to control the stacking of elements.
Responsive & Flexible: The component is fully responsive and is placed inside the standard grid container for easy integration into multi-card layouts.

Code Breakdown

HTML Structure

The entire card is an anchor (a) tag with the class .oti-card. This makes the whole unit a single clickable link. Inside, the structure is simple: an img element for the background and a div that wraps the text content (h3 and p).

CSS Styling

The layering effect is controlled by a CSS stacking context.

The main card (.oti-card) is set to position: relative, which establishes the positioning boundary for its children.
The image (.oti-card-image) is set to position: absolute with a z-index of 1. This places it in the background layer and makes it fill the card's dimensions.
A CSS pseudo-element (.oti-card::before) is used to create the gradient overlay. It is also absolutely positioned, but with a z-index of 2, placing it directly on top of the image. The background uses the linear-gradient() function to transition from dark and opaque at the bottom to transparent at the top.
The text container (.oti-card-content) has a position: relative and a z-index of 3, which ensures it sits on the very top layer, above the gradient and image.
Finally, Flexbox properties on the main card are used to push this content block to the bottom of the card.

Code

Here's the complete code for the card. The template is ready to use and can be customized by changing the images or modifying the CSS variables.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f0f0f0; /* A neutral light gray */
    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;
}

/* === Overlay Text on Image Card Styles === */
.oti-card {
    --oti-card-radius: 12px;
    --oti-card-height: 420px;

position: relative; /* Positioning context for children */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes content to the bottom */
    height: var(--oti-card-height);
    background: #222; /* Fallback background */
    border-radius: var(--oti-card-radius);
    overflow: hidden; /* Clips the image and overlay to the card's shape */
    text-decoration: none;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s ease-in-out;
}

.oti-card:hover {
    transform: scale(1.03);
}

/* The card's background image */
.oti-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.oti-card:hover .oti-card-image {
    transform: scale(1.1);
    filter: brightness(0.9);
}

/* Gradient overlay for text readability */
.oti-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 75%);
}

/* Wrapper for the text content */
.oti-card-content {
    position: relative; /* Places content above the overlay */
    z-index: 3;
    padding: 1.5rem;
}

.oti-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.oti-card-description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    opacity: 0.85;
}
</style>

<div class="cards-grid-container">
    
    
    <a href="#" class="oti-card" aria-label="Explore a Tropical Paradise">
        
        <img class="oti-card-image" src="https://picsum.photos/id/1015/600/800" alt="An aerial view of a tropical beach with turquoise water.">
        <div class="oti-card-content">
            <h3 class="oti-card-title">A Tropical Paradise</h3>
            <p class="oti-card-description">Discover the pristine beaches and crystal-clear waters of the South Pacific.</p>
        </div>
    </a>
    
    
    <a href="#" class="oti-card" aria-label="Journey Through the Ancient Forest">
        
        <img class="oti-card-image" src="https://picsum.photos/id/1043/600/800" alt="Sunbeams shining through a dense, mystical forest.">
        <div class="oti-card-content">
            <h3 class="oti-card-title">The Ancient Forest</h3>
            <p class="oti-card-description">Explore a world of giants where moss-covered trees tell ancient tales.</p>
        </div>
    </a>

<a href="#" class="oti-card" aria-label="Adventures in the Mountain Range">
        
        <img class="oti-card-image" src="https://picsum.photos/id/103/600/800" alt="A dramatic mountain range with peaks reflecting in a calm lake.">
        <div class="oti-card-content">
            <h3 class="oti-card-title">Majestic Mountain Peaks</h3>
            <p class="oti-card-description">Embark on a breathtaking journey to conquer the highest peaks.</p>
        </div>
    </a>
    
</div>

View Output