CSS Image Effects

Pairing a hover selector with transform and transition properties turns a static photo into something that responds when a visitor's cursor arrives — zooming in, fading, or shifting color — all without a single line of JavaScript.

In this page:

Hover-triggered Zoom
Fade Between Two Images
Brightness and Filter Transitions
Combining transform and transition
Performance of Animated Images

Hover-triggered Zoom

Scaling an image up slightly on :hover with transform: scale() creates a classic 'zoom in' product-photo effect; wrapping the image in a container with overflow: hidden keeps the enlarged image from spilling outside its box. When an image is scaled up significantly, as during this kind of zoom, image-rendering: pixelated keeps sharp, blocky pixel edges instead of the browser's default smooth blur, which is a deliberate look often used for pixel-art thumbnails.

Example: Hover-triggered Zoom

css

<style>
.wrap {
  overflow: hidden;
}
.wrap img {
  transition: transform 0.3s;
}
.wrap:hover img {
  transform: scale(1.2);
}
</style>
<div class="wrap">
  <img src="https://placehold.co/200x150" alt="Zooms on hover">
</div>

Fade Between Two Images

Stacking two images with absolute positioning and transitioning one's opacity from 0 to 1 on hover creates a smooth crossfade effect, commonly used for 'before/after' or normal/highlighted image states.

Example: Fade Between Two Images

css

<style>
.stack {
  position: relative;
}
.stack img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.stack:hover .top {
  opacity: 1;
}
</style>
<div class="stack">
  <img src="https://placehold.co/200x150" alt="Base">
  <img class="top" src="https://placehold.co/200x150" alt="Fades in on hover">
</div>

Brightness and Filter Transitions

Because filter values can be transitioned just like colors or positions, changing an image's brightness() or grayscale() amount on hover — combined with a transition property — produces a smooth fade rather than an abrupt jump.

Example: Brightness and Filter Transitions

css

<style>
img {
  filter: brightness(70%);
  transition: filter 0.3s;
}
img:hover {
  filter: brightness(100%);
}
</style>
<img src="https://placehold.co/200x150" alt="Brightens smoothly on hover">

Combining transform and transition

The transition property must name transform (or use the all keyword) for a hover-triggered transform change to animate smoothly instead of snapping instantly; the transition is declared on the image's base state, not on the :hover rule itself.

Example: Combining transform and transition

css

<style>
img {
  transition: transform 0.3s;
}
img:hover {
  transform: scale(1.1);
}
</style>
<img src="https://placehold.co/200x150" alt="Transition declared on the base state">

Performance of Animated Images

Animating transform and opacity is comparatively cheap for the browser because they can run on the GPU without forcing a page layout recalculation, which is why hover effects favor those two properties over animating width, height, or margin directly.

Example: Performance of Animated Images

css

<style>
img {
  transition: transform 0.3s, opacity 0.3s;
}
img:hover {
  transform: scale(1.1);
  opacity: 0.9;
}
</style>
<img src="https://placehold.co/200x150" alt="Animates transform and opacity, both GPU-cheap">

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Image Styling Next Lesson → CSS Hover Overlays