Image Effects & Hover Overlays

Image Effects & Hover overlays

Add grayscale, zoom, and dark text overlays that appear when hovered.

Grayscale to color

img {
  filter: grayscale(100%);
  transition: filter 0.4s;
}
img:hover {
  filter: grayscale(0);
}

Zoom on hover + dark overlay

.card {
  position: relative;
  overflow: hidden;
}
.card img {
  display: block;
  width: 100%;
  transition: transform 0.4s;
}
.card:hover img {
  transform: scale(1.1);
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.4s;
}
.card:hover .overlay {
  opacity: 1;
}

Text on the overlay

<div class="card">
  <img src="photo.jpg" alt="Beach">
  <div class="overlay"><span class="label">A beach!</span></div>
</div>

.overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

Slide-in caption

.overlay {
  position: absolute;
  bottom: 0;
  top: auto;
  opacity: 1;
}

TL;DR

• filter: grayscale() on img + transition.
• Overlay = absolute inset box with opacity: 0 → 1 on hover.
• overflow: hidden + scale() zoom.
• Pair overlay with flex to center label text.