Easy Ways to Add Hover Overlays on Service Cards

A modern Hover Overlays on Service Cards hover design lets you present multiple services in a stylish, user-friendly way. Each card contains an image, a heading, and a short description. When visitors hover over a card, an overlay slides in, revealing extra details and a call-to-action button.

This layout is built on a responsive grid, so the cards automatically adapt to any screen size. Subtle shadows, rounded corners, and smooth hover transitions make the design feel professional and interactive.

Create index.html file and copy code and paste code our layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Service Card Hover – Responsive Grid</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h1>Services Box</h1>

  <div class="card-container">
    <div class="card">
      <img src="img/image-1.jpg" alt="Service">
      <div class="content">
        <h3>Standard Cleaning</h3>
        <p>Routine cleaning of floors, surfaces, and dusting to maintain overall hygiene.</p>
      </div>
      <div class="overlay">
        <ul>
          <li>Wiping and sanitizing light switches, handles, and door knobs</li>
          <li>Cleaning mirrors and glass surfaces for a streak-free shine</li>
          <li>Emptying trash bins and replacing liners</li>
          <li>Organizing small household items (magazines, cushions, toys)</li>
          <li>Freshening up rooms with a light deodorizing spray</li>
        </ul>
        <button>
          Learn More
        </button>
      </div>
    </div>

    <div class="card">
      <img src="img/image-2.jpg" alt="Service">
      <div class="content">
        <h3>Deep Cleaning</h3>
        <p>Intensive scrubbing of kitchens, bathrooms, and hard-to-reach areas.</p>
      </div>
      <div class="overlay">
        <ul>
          <li>Scrubbing tiles, grout, and bathroom fixtures</li>
          <li>Cleaning inside cabinets, drawers, and appliances</li>
          <li>Washing baseboards, window sills, and vents</li>
          <li>Polishing doors, knobs, and light switches</li>
          <li>Vacuuming upholstery and under furniture</li>
        </ul>
        <button>
          Learn More
        </button>
      </div>
    </div>

    <div class="card">
      <img src="img/image-3.jpg" alt="Service">
      <div class="content">
        <h3>Bathroom Cleaning</h3>
        <p>Boost your brand visibility through SEO, ads & social media.</p>
      </div>
      <div class="overlay">
        <ul>
          <li>Scrubbing and sanitizing fixtures</li>
          <li>Cleaning and sanitizing toilets, seats, and handles</li>
          <li>Washing shower tiles, grout, and glass doors</li>
          <li>Polishing mirrors and chrome fixtures for a streak-free shine</li>
          <li>Mopping and deodorizing floors for a fresh finish</li>
        </ul>
        <button>
          Learn More
        </button>
      </div>
    </div>
  </div>

</body>
</html>

You will also like this post

Create style.css file and copy code and paste code our layout.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ui-monospace;
}

body {
background: #ff184e;
padding: 40px 20px;
}

h1 {
color: #fff;
font-size: 50px;
text-align: center;
margin-bottom: 20px;
}

/* ---------- GRID ---------- */
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
align-items: stretch;          /* ensures equal height */
}

/* ---------- CARD ---------- */
.card {
display: flex;
flex-direction: column;
position: relative;
background: #fff;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
overflow: hidden;
transition: border 0.3s ease;
border: none;
}

/* Image */
.card img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}

/* Content */
.content {
padding: 30px 20px;
text-align: center;
flex: 1;                       /* pushes button area down */
}

.content h3 {
font-size: 30px;
color: #000;
margin-bottom: 10px;
}

.content p {
font-size: 18px;
color: #000;
}


.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 123, 255, 0.95);
color: #fff;
flex-direction: column;
justify-content: space-between; /* space between list and button */
padding: 20px;                 /* reduce padding if needed */
opacity: 0;
transition: opacity 0.4s ease;
}

.overlay ul {
list-style: disc;
text-align: left;
margin: 0;
padding-left: 20px;
flex-grow: 1;                  /* takes available space */
}

.overlay li {
margin: 10px 0;
font-size: 18px;
}

.overlay button {
background: #fff;
color: #007bff;
border: none;
padding: 10px 20px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
align-self: center;
margin-top: 10px;             /* small gap from list */
position: relative;
overflow: hidden;
}


.overlay button:hover {
background: #e0e0e0;
}

/* Hover Effects */
.card:hover .overlay {
opacity: 1;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
body { padding: 30px 15px; }
}

@media (max-width: 480px) {
.content h3 { font-size: 18px; }
.content p { font-size: 13px; }
}

Conclusion

The Service Card Hover – Responsive Grid is a sleek, versatile layout that highlights your services while keeping your design clean and engaging. Its responsive structure, smooth hover effects, and clear call-to-action buttons make it ideal for business websites, portfolios, or service pages. By using this design, you’ll present information in an attractive, easy-to-navigate way that encourages visitors to explore and take action.