?️ CSS Image Styling

⚡ Quick Overview

Learn how to style images using CSS to enhance your web pages. You will see how to round images, create thumbnails, make images responsive, build polaroid-style cards, and control transparency with opacity.

Well-styled images improve the visual design, readability, and user experience of your website.

? Key Concepts

• border-radius – rounds image corners or creates perfect circles.
• Thumbnails – small framed images using borders, padding, and hover effects.
• Responsive images – images that scale nicely on all screen sizes using max-width: 100%.
• Polaroid cards – image cards with shadows and captions for a photo-gallery feel.
• opacity – controls how transparent an image appears.

? Rounded & Circle Images

You can use the border-radius property to create rounded corners or circular images.

/* Apply rounded corners and circle shapes to images */
img.rounded {
  border-radius: 8px;
  width: 200px;
  height: 250px;
}

img.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

? Live Output Preview

Rounded image: has slightly curved corners using border-radius: 8px;.

Circle image: becomes a perfect circle using border-radius: 50%; with equal width and height.

Example:

?️ Thumbnail Images

Thumbnails are small preview images often used in galleries. You can create them using borders, padding, and hover effects.

/* Style images as neat thumbnails with hover shadow */
img.thumbnail {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

img.thumbnail:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

? Live Output Preview

The image appears smaller with a light border and padding. On hover, a soft shadow makes it look clickable and modern.

Example:

? Responsive Images

Responsive images automatically adjust their size to fit the screen width. This prevents overflow and horizontal scrolling.

/* Make images shrink to fit smaller screens while keeping aspect ratio */
img.responsive {
  max-width: 100%;
  height: auto;
}

? Live Output Preview

The responsive image will never be wider than its container. On smaller screens, the image shrinks proportionally.

Example:

?️ Polaroid Images / Cards

You can create a polaroid-style effect by wrapping an image inside a card with a shadow, background color, and caption.

/* Create a polaroid-style image card with caption */
div.polaroid {
  width: 80%;
  max-width: 300px;
  background-color: white;
  box-shadow:
    0 4px 8px 0 rgba(0,0,0,0.2),
    0 6px 20px 0 rgba(0,0,0,0.19);
  margin: 20px auto;
  text-align: center;
  padding-bottom: 10px;
  border-radius: 6px;
}

div.polaroid img {
  width: 100%;
  border-radius: 6px 6px 0 0;
}

? Live Output Preview

The image appears inside a white card with a drop shadow, like an old-school polaroid photo, with a caption at the bottom.

Example:

Beautiful Nature

✨ Transparent Images (Opacity)

The opacity property controls transparency. Values range from 0 (fully transparent) to 1 (fully opaque).

/* Reduce image visibility using opacity */
img.transparent {
  opacity: 0.5;
  width: 300px;
}

? Live Output Preview

With opacity: 0.5;, the image looks faded. This is useful for backgrounds or hover effects.

Example: