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%);
}