CSS - Images

In this article, we will learn about how to style an image to change its shape, size, and layout by using different CSS properties such as padding, borders, height, width, margins, etc.

Table of Contents

Round Cornered Images

The following example demonstrates how to use border-radius property to create rounded border image.

Example

Circular And Elliptical Images

The following example demonstrates how to use border-radius: 50% property to create images in circle and ellipse shape. When height and width of image are same we will get a circular image and when they are not same we will get elliptical images.

Example

Bordered Images

The following example demonstrates how to create a border around any images.

Example

Image Filters

The following example demonstrates that different filter effects are applied to an image using filter property.

Example

Image as a Card

The following example demonstrates a responsive polaroid-styled image with a shadow effect.

Center an Image

There are several way to center an image inside a container, most popular way is to use flex layout with justify-content and align-items properties.

• justify-content: center: This will center image horizontally

• align-items: center: This will center image vertically

Example

In this example we used flex layout to center an image

Text Inside Image

In CSS position property can be used to position text in different locations inside an image.

First we need to set position property for image container as position: relative and position property of text as position: absolute . Now you can position of text elements using inset properties like top, bottom, right and left.

Example

Image Fade In Overlay

Fade in overlay effect shows text when you hover over the image. There are several other overlay effects, for complete understanding checkout our tutorial on CSS overlay effects.

Let’s look at an example for image fade in overlay effect.

Example