Skip to main content

Introduction to CSS Styling Images

CSS Styling Images​

CSS provides various properties that can be used to style images on a webpage

Rounded Images​

To create rounded images using CSS, you can use the "border-radius" property.

As an example:

Editor

Loading...

In this example:

  • The "border-radius" property is set to 50% to create a circular shape for the image.
  • You can adjust the value of the "border-radius" property to create different levels of roundness for the image.

You can also use different values for the "border-radius" property to create rounded corners for rectangular images.

As an example:

.rounded {
  border-radius: 10px;
}

In addition, you can use other CSS properties such as "box-shadow" to add visual effects to the rounded images.

As an example:

.rounded {
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Thumbnail Images​

Thumbnail images are often used in galleries or product listings to provide a preview of an image or product.

As an example:

Editor

Loading...

In this example:

  • The "thumbnail-container" div contains three images with the "thumbnail" class.
  • The "display" property is set to "flex" to center the thumbnails horizontally, and the "justify-content" and "align-items" properties are set to "center" to center the thumbnails vertically.
  • The "thumbnail" class sets the width and height of the thumbnail images, and the "object-fit" property is set to "cover" to fill the thumbnail with the image and maintain the aspect ratio.
  • The "margin" property adds space between the thumbnails, and the "cursor" property changes the mouse cursor to a pointer when hovering over the thumbnail.
  • The "border" property is set to transparent by default and changes to a solid black border when the thumbnail is hovered over using the ":hover" pseudo-class.

Responsive Images​

Responsive images are images that are optimized to look good and load quickly across different devices and screen sizes.

As an example:

Editor

Loading...

Center an Image​

To center an image horizontally within its container, you can use CSS.

Here are two ways to achieve this:

  • Using margin: set the left and right margins of the image to "auto" and set its display property to "block". This will center the image horizontally within its container.

As an example:

<img
  src="example.jpg"
  alt="Example Image"
  style="display: block; margin: auto;"
/>
  • Using text-align: set the text-align property of the container element to "center". This will center any child elements of the container, including images.

As an example:

<div style="text-align: center;">
  <img src="example.jpg" alt="Example Image" />
</div>
tip

These techniques will center the image horizontally, but not vertically.

Polaroid Images / Cards​

Polaroid images or cards are a popular design element used on websites and in graphic design. They are named after the Polaroid camera, which produced square instant prints with a distinctive border around the edges.

As an example:

Editor

Loading...

In this example:

  • We create a div element with a class of "polaroid".
  • Inside the div, we place an image element and a caption div.
  • The CSS styles for the "polaroid" class create a white background, add padding and a border, and apply a box-shadow effect to create a 3D effect.
  • The CSS styles for the image element make it responsive by setting its width to 100% of its container and its height to auto.
  • The CSS styles for the caption div set the text alignment to center, the font size to 14px, and add some margin above the caption text.

Image Filters​

Image filters are visual effects that can be applied to images using CSS. They allow you to adjust the appearance of an image in a variety of ways, such as changing the brightness, contrast, hue, and saturation.

Here are a few examples of common image filters:

  • Grayscale: converts the image to black and white.

As an example:

img {
  filter: grayscale(100%);
}
  • Sepia: gives the image a brownish tint, like an old photograph.

As an example:

img {
  filter: sepia(100%);
}
  • Blur: makes the image appear blurred or out of focus.

As an example:

img {
  filter: blur(5px);
}
  • Brightness: adjusts the overall brightness of the image.

As an example:

img {
  filter: brightness(150%);
}
  • Contrast: adjusts the difference between light and dark areas of the image.

As an example:

img {
  filter: contrast(150%);
}
  • Hue-rotate: changes the color of the image by rotating the color wheel.

As an example:

img {
  filter: hue-rotate(90deg);
}
  • Saturation: adjusts the intensity of the colors in the image.

As an example:

img {
  filter: saturate(200%);
}