Styling Images with CSS

Image Properties

max-width: 100% makes images responsive.

object-fit controls how images fit their containers.

border-radius creates rounded or circular images.

filter applies visual effects like blur, grayscale, brightness.

Always set height: auto for responsive images.

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Rounded images */
.rounded {
  border-radius: 10px;
}

/* Circular images */
.circular {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  object-fit: cover;
}

/* Image filters */
.grayscale {
  filter: grayscale(100%);
}

.blur {
  filter: blur(5px);
}

/* Hover effect */
img:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
  transition: all 0.3s;
}