Destination Highlight Card

Showcase travel destinations or featured locations with this visually immersive and elegant highlight card.

This design prioritizes a high-quality image by making it the full background of the card. The destination's name and country are overlaid on top, using a subtle gradient to ensure the text is always clear and readable.

Screenshot of three destination cards with beautiful travel photos and overlaid text.

Get Source Code Preview

About this Component

This component uses CSS positioning and layering to make the entire card a single, clickable link leading to more details about the location. On hover, the background image subtly zooms in to provide a rich, interactive experience. The text overlay remains stationary at the bottom, creating a clean effect.

Features

Full-Bleed Image: The destination image covers the entire card for maximum visual impact.
Text Overlay with Gradient: A semi-transparent gradient at the bottom ensures text is always legible against any background photo.
Hover Zoom Effect: The background image gently zooms on hover, adding an elegant micro-interaction.
Single Clickable Area: The entire card is a valid, single link, making it easy for users to tap or click.

Code Breakdown

HTML Structure

The card is an article. Inside, a single anchor tag (a) wraps all the visible elements (the background img and a div) for the textual content. The destination name is an h3 with a unique id that is referenced by the link's aria-labelledby attribute for accessibility.

CSS Styling

The card (.dest-card) is set to position: relative, which serves as the positioning context. The a tag inside is a flex container that fills the entire card. The img element is then absolutely positioned with inset: 0 to fill the entire card, and given a low z-index: 1 to sit at the back. A CSS pseudo-element (::before) on the link creates the gradient overlay and is given a z-index: 2 to sit above the image. Finally, the content div is given a position: relative and a higher z-index: 3, which ensures it always appears on top of the image and the gradient.

Code

Here's the complete, self-contained code. This component is perfect for building a visually-driven gallery of places.

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f0f0f0;
    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(280px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

/* === Destination Card Styles === */
.dest-card {
    --dest-card-radius: 12px;
    --dest-card-height: 380px;

position: relative;
    display: block;
    height: var(--dest-card-height);
    border-radius: var(--dest-card-radius);
    overflow: hidden;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* The stretched link itself is the main container for content */
.dest-card-link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pushes content to the bottom */
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Background Image */
.dest-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Sits at the back */
    transition: transform 0.4s ease;
}
.dest-card:hover .dest-card-image {
    transform: scale(1.05);
}

/* Gradient Overlay */
.dest-card-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
    z-index: 2; /* Sits above the image */
}

.dest-card-content {
    position: relative;
    z-index: 3; /* Sits on top of everything */
    padding: 1.5rem;
}

.dest-card-name {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.dest-card-country {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.9;
}

</style>

<div class="cards-grid-container">
    
    
    <article class="dest-card">
        <a href="#" class="dest-card-link" aria-labelledby="dest-name-1">
            
            <img class="dest-card-image" src="https://placehold.co/600x800/a5b4fc/ffffff/png?text=Hallstatt" alt="Dramatic mountains and lake scenery in Hallstatt, Austria.">
            <div class="dest-card-content">
                <h3 class="dest-card-name" id="dest-name-1">Hallstatt</h3>
                <p class="dest-card-country">Austria</p>
            </div>
        </a>
    </article>
    
    
     <article class="dest-card">
        <a href="#" class="dest-card-link" aria-labelledby="dest-name-2">
            
            <img class="dest-card-image" src="https://placehold.co/600x800/7dd3fc/ffffff/png?text=Santorini" alt="The iconic blue-domed churches of Santorini, Greece.">
            <div class="dest-card-content">
                <h3 class="dest-card-name" id="dest-name-2">Santorini</h3>
                <p class="dest-card-country">Greece</p>
            </div>
        </a>
    </article>

<article class="dest-card">
        <a href="#" class="dest-card-link" aria-labelledby="dest-name-3">
            
            <img class="dest-card-image" src="https://placehold.co/600x800/fca5a5/ffffff/png?text=Portofino" alt="Vibrant cityscape of Portofino, Italy with colorful buildings.">
            <div class="dest-card-content">
                <h3 class="dest-card-name" id="dest-name-3">Portofino</h3>
                <p class="dest-card-country">Italy</p>
            </div>
        </a>
    </article>

</div>

View Output