Why does the demo use a gradient box instead of a real photo?

This tool runs entirely client-side with no uploads, so the gallery stands in with a gradient placeholder. The generated HTML uses a normal tag — just point src at your own image and the overlay CSS works exactly the same over a real photo.

Why is overflow: hidden important on the wrapper?

The Zoom effect scales the image past its container's edges (transform: scale(1.12)), and the Slide-up Caption effect starts its caption translated fully below the box. Without overflow: hidden on .hover-overlay, both would spill outside the rounded corners.

Can I use these overlays on a background-image div instead of an ?

Yes — swap .hover-overlay-img for a div with background-size: cover; background-position: center and the same hover rules apply unchanged, since the effects only target opacity, transform, and background on the wrapper and overlay elements.

How do I make the overlay show on tap for mobile?

CSS :hover doesn't fire reliably on touchscreens. For a tap-to-reveal version, add a small script that toggles a .force (or similarly named) class on tap, matching the class this tool's Force preview checkbox simulates — the CSS rules already work with it.

Does this tool store or upload anything?

No — every effect, caption, and color is generated and rendered locally in your browser. Nothing is sent to a server.

CSS IMAGE HOVER OVERLAY GENERATOR

Browse zoom, dim, caption, and icon-reveal hover overlays, and copy the CSS.

Force preview (skip hover)

.hover-overlay {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.hover-overlay-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hover-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #201d19cc;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hover-overlay-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hover-overlay:hover, .hover-overlay.force::before,
.hover-overlay:hover .hover-overlay-caption, .hover-overlay.force .hover-overlay-caption {
  opacity: 1;
}

How to use an image hover overlay

1
Hover (or turn on Force preview) each card to see the overlay effect live.
2
Type a caption and pick an overlay color.
3
Click a card to select that effect.
4
Copy the CSS and HTML, then swap the placeholder src for your own image.

Questions

Why does the demo use a gradient box instead of a real photo?: This tool runs entirely client-side with no uploads, so the gallery stands in with a gradient placeholder. The generated HTML uses a normal <img> tag — just point src at your own image and the overlay CSS works exactly the same over a real photo.
Why is overflow: hidden important on the wrapper?: The Zoom effect scales the image past its container's edges (transform: scale(1.12)), and the Slide-up Caption effect starts its caption translated fully below the box. Without overflow: hidden on .hover-overlay, both would spill outside the rounded corners.
Can I use these overlays on a background-image div instead of an <img>?: Yes — swap .hover-overlay-img for a div with background-size: cover; background-position: center and the same hover rules apply unchanged, since the effects only target opacity, transform, and background on the wrapper and overlay elements.
How do I make the overlay show on tap for mobile?: CSS :hover doesn't fire reliably on touchscreens. For a tap-to-reveal version, add a small script that toggles a .force (or similarly named) class on tap, matching the class this tool's Force preview checkbox simulates — the CSS rules already work with it.
Does this tool store or upload anything?: No — every effect, caption, and color is generated and rendered locally in your browser. Nothing is sent to a server.