→ Melissa Chen
→ Image Cards with Gradient Hover Effect

Image Cards with Gradient Hover Effect

A collection of cards featuring background images with smooth gradient overlays that reveal content on hover, perfect for portfolios or featured content sections.

This Example is contributed by Melissa Chen, on 08-Apr-2025. It is responsive. similar terms for this example are Card Design,Cards,Masonry, Image grid,Grid Display,CSS Grid,Grid,Card Grid

Card Image gallery Hover Effect Grid Layout Gradient Overlay

Author Melissa Chen

Fork Fullscreen

<div class="card-container">
  <div class="card">
    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80')">
      <div class="card-overlay">
        <h3>Mountain Landscape</h3>
        <p>Beautiful mountain view with clear blue skies and lush forests.</p>
        <a href="#" class="btn">Explore</a>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1468581264429-2548ef9eb732?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80')">
      <div class="card-overlay">
        <h3>Ocean Sunset</h3>
        <p>Breathtaking sunset view over the calm ocean waters.</p>
        <a href="#" class="btn">Explore</a>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80')">
      <div class="card-overlay">
        <h3>Forest Path</h3>
        <p>A serene path through an ancient forest filled with towering trees.</p>
        <a href="#" class="btn">Explore</a>
      </div>
    </div>
  </div>
</div>

Related Examples

Didn't find component you were looking for?

Search from 500+ components