CSS Advanced

CSS Image Styling

CSS turns plain <img> tags into polished UI: rounded avatars, framed thumbnails, responsive images that never overflow, and cropped covers with object-fit. Filters and hover effects add the finishing touch.

Rounded and circular images

border-radius rounds an image's corners; 50% on a square image produces a circular avatar. Add a border or shadow for a framed look.

Rounded and circle

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

Responsive images

Setting max-width: 100% and height: auto lets an image shrink to fit its container while keeping its aspect ratio, so it never overflows on small screens.

Fluid image

img { max-width: 100%; height: auto; display: block; }

object-fit for cropping

When you set a fixed width and height, object-fit controls how the image fills that box. cover crops to fill, contain fits the whole image with possible letterboxing, and fill stretches it.

object-fit value	Behavior
cover	Fills the box, cropping the overflow
contain	Fits entirely, may leave empty space
fill	Stretches to the box, may distort
none	Keeps natural size, may overflow or clip

Try it: circle, rounded, and thumbnail (SVG placeholders)

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; display:flex; gap:24px; align-items:center;
         padding:36px; background:#f1f5f9; }
  .ph { width:120px; height:120px;
        background:linear-gradient(135deg,#818cf8,#ec4899); }
  .circle { border-radius:50%; }
  .rounded { border-radius:16px; }
  .thumb { border:4px solid #fff; border-radius:12px;
           box-shadow:0 6px 18px rgba(0,0,0,.18); }
  span { display:block; text-align:center; margin-top:8px; font-size:13px; }
</style>
</head>
<body>
  <div><div class="ph circle"></div><span>circle</span></div>
  <div><div class="ph rounded"></div><span>rounded</span></div>
  <div><div class="ph thumb"></div><span>thumbnail</span></div>
</body>
</html>

Filters and hover effects

The filter property applies visual effects like grayscale, blur, brightness, and sepia. Combining a filter change with a transition creates a smooth hover reveal, common in image galleries.

Try it: grayscale to color on hover

Example

<!DOCTYPE html>
<html>
<head>
<style>
  body { display:flex; gap:20px; padding:36px; background:#0f172a; }
  .tile {
    width:130px; height:130px; border-radius:12px;
    background:conic-gradient(from 0deg,#f472b6,#818cf8,#22d3ee,#f472b6);
    filter: grayscale(100%);
    transition: filter .4s ease, transform .4s ease;
  }
  .tile:hover { filter: grayscale(0%); transform: scale(1.06); }
</style>
</head>
<body>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</body>
</html>

💡

For avatars, pair a square width/height with object-fit: cover and border-radius: 50% so any photo fills the circle without distortion.

ℹ️

The demos here use gradient placeholders because the live preview cannot load external image files, but the same CSS applies directly to real <img> elements.

Key points

border-radius: 50% on a square makes a circular image.
max-width: 100% and height: auto make images responsive.
object-fit: cover crops an image to fill a fixed box without distortion.
The filter property adds grayscale, blur, brightness, and more.
Transition a filter or transform for smooth gallery hover effects.