Styling Images in CSS

When it comes to enhancing the beauty of the web design we often think of adding images to our website. However, just adding images is not enough, therefore, you need to style them in various ways to make them look more appealing. CSS provides plenty of properties that you can use to add styling to images.

This post enlightens on how to style images in CSS. In this guide, you will go through the following:

1. How to make circled images
2. How to make rounded corner images
3. How to make responsive images
4. How to center images
5. How to make transparent images
6. How to place text on images
7. How to add filter to images
8. How to make hover overlay on images
9. How to flip images

Let’s get started.

How to make circled images

For the purpose of making your images appear as circles, use the CSS border-radius property. Below we have presented you with an example of a circled image.

HTML

Here we have simply added an image in the src attribute of the <img> tag.

CSS

Setting the border-radius to 50% we are making the image a circle. You can change the value if you wish to make it an oval or less rounded. 

Output

The image was circled successfully. 

How to make rounded corner images

The CSS border-radius property can also be used to make the corner of images rounded, here is how you do it.

CSS

Here we are giving the border-radius value in pixels to make the corners rounded.

Output

The corners of the image have been rounded.

How to make responsive images

Images that are responsive adjust their size according to the browser window. The below-mentioned example demonstrates how to do it.

HTML

In the above code, we have simply added an image.

CSS

To make the image responsive, set the max-width to 100% and height to auto.

Output

The image is changing its width according to the size of the browser window.

How to center images

To place an image in the center, display it as a block-level element and set its margins to auto. Consider the example below.

CSS

To center an image we are simply displaying it as a block-level element and setting its right and left margins to auto.

Output

The image has been center aligned.

How to make transparent images

If you wish to make your images transparent then use the CSS opacity property. The lesser the value of the opacity property, the more the transparency of the image.

CSS

In the above code, the opacity of the image was set to 0.3.

Output

The image was made transparent successfully.

How to place text on images

Use the CSS position property to place text on certain positions on the images. The various positions that you can place the text on the image are as follows.

1. Top left
2. Bottom left
3. Center
4. Top right
5. Bottom right

Here we have demonstrated with the help of an example.

HTML

In the above code, we have created a div container and placed the image and another div container inside it.

CSS

The first div has been given a relative position so that the second div that holds the text can be placed inside it. Using the topleft class we are assigning the second div an absolute position and giving it some length from top and left, moreover, giving certain font size and style to the text.

Output

The text has been added on the image at the top left position.

How to add filters to images

For the purpose of adding filter to images such as blurriness or saturation, use the filter property. Consult the example below:

CSS

Here we are using the invert() method on the filter property to add visual effects to the image.

Output

Visual effects were added successfully to the image.

Some other methods that you can use on the filter property to add various visual effects are:

• blur(),
• contrast(),
• brightness(),
• grayscale(),
• saturate(),
• opacity(), etc.

How to flip images

Flipping an image when the user brings the mouse over it can be an interesting thing to do. In order to do this, use the CSS transform property.

CSS

Here we are flipping the image along the Y-axis using the scaleY() method of transform property.

Output

The image was flipped across the y-axis.

Conclusion

Styling images that appear on your website is highly important and this can be done using various CSS properties. Multiple things that you can do to style your images is that make them a circle, make their corners rounded, or make them a thumbnail. Moreover, you can make your images responsive, or add text or certain visual effects on them. In this post, we have shown many ways in which you can style your images using CSS, along with relevant examples.