CSS Image Hover Effects

A CSS image hover effect changes an image or reveals content when a visitor points to it. Use these examples to explore zoom, overlays, captions, and other transitions. Keep the information and actions available to keyboard and touch users too, since many devices do not provide reliable hover input.

How do CSS image hover effects work?

A hover effect is usually a CSS rule applied with the :hover pseudo-class. A transition can make the change feel smooth. If a card contains a link or button, add a matching :focus-within state so keyboard users can see the same treatment when that control receives focus.

Accessible image hover effect example

This pattern zooms an image slightly when the card is hovered or contains the keyboard focus. Keep essential text visible without hover, and use a reduced-motion rule for visitors who prefer fewer animations.

.image-card {
  overflow: hidden;
}

.image-card img {
  display: block;
  width: 100%;
  transition: transform 200ms ease;
}

.image-card:hover img,
.image-card:focus-within img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .image-card img {
    transition: none;
  }
}

See MDN guidance for the :hover pseudo-class and the prefers-reduced-motion media feature.

Browse both image hover demo sets

Open the examples to compare different reveal and transition styles. The demo cards illustrate visual patterns; replace their sample text and destinations with meaningful content in your project.