CSS Image Styling: Rounded, Thumbnail, Responsive and Hover Effects

CSS image styling turns plain photos into polished designs. Learn rounded and circle images, thumbnails, image cards, centered and transparent images, text overlays and hover zoom.

Rounded and circle images

The border-radius property rounds the corners of images, just like boxes.

<img class="rounded" src="https://picsum.photos/id/1015/400/250" alt="River between green mountains" width="400" height="250">
<img class="avatar" src="https://picsum.photos/id/1027/300/400" alt="Portrait of Anna" width="300" height="400">

.rounded {
  border-radius: 12px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

The first photo gets soft rounded corners. The second becomes a perfect circle, even though the original photo is a tall rectangle: we force it into a 120px square, object-fit: cover crops it without squashing, and border-radius: 50% turns the square into a circle. If you used 50% on the tall rectangle, you'd get an oval instead.

Thumbnail images

A thumbnail is a small preview of a bigger image, often in a gallery. A classic thumbnail style uses padding and a border, so the photo looks like a printed picture with a white edge:

<a class="thumb" href="https://picsum.photos/id/1039/1600/1000">
  <img src="https://picsum.photos/id/1039/300/200" alt="Waterfall in a forest" width="150" height="100">
</a>

.thumb img {
  display: block;
  width: 150px;
  height: auto;
  padding: 4px;
  background: white;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  transition: box-shadow 0.2s;
}

.thumb:hover img {
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.2);
}

You'll see a small photo with a thin white frame and a gray border. Hovering adds a shadow so it looks lifted off the page, and clicking opens the full-size image. Padding on an image works because the image is a box like any other: the background color shows in the padding.

Image cards and centered images

Many sites show an image on top of a text block, called a card.

<article class="card">
  <img src="https://picsum.photos/id/292/600/400" alt="Fresh vegetables on a wooden table" width="600" height="400">
  <div class="card-body">
    <h3>Spring Vegetable Soup</h3>
    <p>Ready in 30 minutes, with fresh peas and carrots.</p>
  </div>
</article>

.card {
  max-width: 320px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.1);
  background: white;
}

.card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.card-body {
  padding: 16px;
}

The card has rounded corners, and the photo at the top follows them, because overflow: hidden on the card clips the image's square corners.

Centering an image: an image is inline by default, so you can center it in two ways. Either put text-align: center on its parent, or make the image a block and use auto margins:

.centered {
  display: block;
  margin-inline: auto;
  max-width: 100%;
}

Common mistake: Writing margin: 0 auto on an image and seeing nothing happen. Auto margins only center block boxes. Add display: block first.

Transparent images

The opacity property makes an image see-through, from 0 (invisible) to 1 (fully visible). It's handy for "faded" logos that come alive on hover:

.partner-logo {
  width: 120px;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.3s, filter 0.3s;
}

.partner-logo:hover {
  opacity: 1;
  filter: grayscale(0);
}

A row of partner logos shows in faded gray. When you hover over one, it fades in to full color. Note that opacity affects the whole element and everything inside it. For a see-through background only, use a color with transparency like rgb(0 0 0 / 0.5) instead.

Text overlay on an image

To put text on top of a photo, make the wrapper position: relative and place the text with position: absolute. A dark gradient behind the text keeps it readable on any photo.

<figure class="overlay">
  <img src="https://picsum.photos/id/1036/800/500" alt="Snowy mountain road at sunset" width="800" height="500">
  <figcaption>Winter road trip: 5 tips for safe driving</figcaption>
</figure>

.overlay {
  position: relative;
  max-width: 600px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}

.overlay img {
  display: block;
  width: 100%;
  height: auto;
}

.overlay figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 16px 16px;
  color: white;
  font-weight: bold;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.75));
}

The caption sits along the bottom of the photo in white bold text, over a gradient that fades from clear to dark. inset: auto 0 0 0 is short for top: auto; right: 0; bottom: 0; left: 0, so the caption sticks to the bottom and spans the full width.

Hover zoom effect

A gentle zoom on hover makes image cards feel alive. The trick: scale the image, but hide the overflow on its wrapper, so it grows inside its frame.

.zoom {
  overflow: hidden;
  border-radius: 12px;
}

.zoom img {
  display: block;
  width: 100%;
  transition: transform 0.4s ease;
}

.zoom:hover img {
  transform: scale(1.08);
}

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

Wrap any image in <div class="zoom">. On hover, the photo slowly zooms in by 8%, but the frame stays the same size, so the edges are simply cropped. The media query turns off the animation for people who prefer less motion.

Tip: Animate transform and opacity rather than width or height. Browsers can animate them smoothly without recalculating the page layout.

Practice exercise

Build a "team" section with three cards. Each card has a circular photo, a name and a role. Below it, add a gallery of six thumbnails with the hover zoom effect, and a big banner image with a text overlay at the bottom. Make all images responsive.

Hint: for circular photos, set equal width and height, then object-fit: cover and border-radius: 50%.

Key takeaways

• border-radius rounds images; 50% on a square image with object-fit: cover makes a circle.
• Thumbnails use padding, a background and a border to look like framed prints.
• Use overflow: hidden on cards so images follow rounded corners, and display: block before centering with auto margins.
• opacity fades an image; a relative wrapper plus an absolute caption creates a text overlay.
• Hover zoom = overflow: hidden on the wrapper plus transform: scale() on the image.