CSS Image Styling

Image Styling

Images can be styled like any other element. Common image styling includes adding borders, rounding corners, and controlling sizing behavior.

Rounded image and border:

.img-round {
  width: 260px;
  height: auto;
  border-radius: 14px;
  border: 2px solid rgba(0,0,0,.12);
}

Circle image:

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

Responsive image (keep inside container):

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

Tip: Use object-fit when you want fixed-size image boxes (like cards) without distortion.

Image Effects

CSS can apply effects to images using filters and transforms. Filters are great for grayscale, blur, brightness, and contrast adjustments.

Grayscale + slight contrast:

.img-effect {
  filter: grayscale(100%) contrast(110%);
}

Blur (use carefully):

.img-blur {
  filter: blur(3px);
}

Hover zoom effect:

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

.zoom-wrap img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .25s ease;
}

.zoom-wrap:hover img {
  transform: scale(1.06);
}

Tip: The wrapper uses overflow: hidden so the zoom does not overflow outside rounded corners.

Hover Overlays

A hover overlay is a layer placed on top of an image (for example, to show a title, icon, or button). This is common in galleries and cards.

HTML structure:

<div class="img-card">
  <img src="photo.jpg" alt="">
  <div class="overlay">
    <div class="overlay-content">View</div>
  </div>
</div>

CSS:

.img-card {
  position: relative;
  width: 320px;
  border-radius: 14px;
  overflow: hidden;
}

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

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  transition: opacity .2s ease;
}

.overlay-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 600;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
}

.img-card:hover .overlay {
  opacity: 1;
}

You can also animate the overlay content for a nicer effect:

.overlay-content {
  transform: translate(-50%, -50%) translateY(8px);
  transition: transform .2s ease;
}

.img-card:hover .overlay-content {
  transform: translate(-50%, -50%) translateY(0);
}

Summary

• Use border-radius and borders to style images (rounded, circle, card images).
• Use filter and transform for visual effects and hover zoom.
• Hover overlays are built with position: relative + absolutely positioned overlay layers.