CSS Hover Overlays

A hover overlay is a caption, icon, or tinted layer that sits invisibly on top of an image until the cursor arrives, then fades or slides into view — a common pattern in photo galleries and product grids.

In this page:

The Overlay Structure
Revealing the Overlay on Hover
Text Captions on Overlays
Icon Reveal Overlays
Sliding vs Fading Overlays

The Overlay Structure

A hover overlay is typically built from a positioned wrapper (position: relative) containing the image plus a second element (position: absolute, same size) sitting directly on top of it, initially hidden with opacity: 0 or a transform that pushes it out of view.

Example: The Overlay Structure

css

<style>
.wrap {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  opacity: 0;
}
.wrap:hover .overlay {
  opacity: 1;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/200x150" alt="Base">
  <div class="overlay">Overlay layer, hidden by default</div>
</div>

Revealing the Overlay on Hover

The overlay's visible state is triggered by a :hover selector on the wrapper, not on the overlay itself, so that hovering anywhere over the image (not just the exact overlay area) reveals it — combined with a transition for a smooth fade or slide.

Example: Revealing the Overlay on Hover

css

<style>
.wrap {
  position: relative;
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.wrap:hover .overlay {
  opacity: 1;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/200x150" alt="Base">
  <div class="overlay">Revealed by hovering the wrapper</div>
</div>

Text Captions on Overlays

Placing a caption inside the overlay element lets it fade in alongside a semi-transparent background tint, a common pattern for photo galleries where the caption names the image without cluttering the default view.

Example: Text Captions on Overlays

css

<style>
.wrap {
  position: relative;
}
.caption {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  opacity: 0;
  transition: opacity 0.3s;
}
.wrap:hover .caption {
  opacity: 1;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/200x150" alt="Photo">
  <div class="caption">Photo Title</div>
</div>

Icon Reveal Overlays

Instead of full opacity text, some overlays reveal just a small icon (like a magnifying glass or a play button) centered over the image, often combined with a slight zoom or darken effect on the image itself underneath.

Example: Icon Reveal Overlays

css

<style>
.wrap {
  position: relative;
}
.icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.wrap:hover .icon {
  opacity: 1;
}
</style>
<div class="wrap">
  <img src="https://placehold.co/200x150" alt="Photo">
  <span class="icon">🔍</span>
</div>

Sliding vs Fading Overlays

An overlay can either fade in via opacity or slide in via a transform: translateY() that moves it from just outside the box into place — sliding tends to feel more directional and is common for caption bars that rise from the bottom edge.

Example: Sliding vs Fading Overlays

css

<style>
.wrap {
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.fade {
  background: lightblue;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}
.slide {
  background: lightgreen;
  padding: 10px;
  transform: translateY(100%);
  transition: transform 0.3s;
}
.wrap:hover .fade {
  opacity: 1;
}
.wrap:hover .slide {
  transform: translateY(0);
}
</style>
<div class="wrap">
  <div class="fade">Fades in</div>
  <div class="slide">Slides up from below</div>
</div>

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Effects Next Lesson → CSS Image Modal