How to Style Images with CSS

Images are one of the important assets when it comes to the web. We use images to express, convey, and show things that may not be possible with text. Style Images with CSS means styling like any other elements with CSS.

An Image is inserted either by using the img tag or picture tag, in this tutorial I\’ll apply CSS styles to the img tag. In case we need to style images of a specific set like post thumbnails or our website logo then we need the class name or id of that particular image.

For Example, if the logo has a class=logo

.logo img{
/* Styles go Here*/
 }

First, let us take a sample image to experiment with,

Add Rounded Corners

We use the border-radius: to set the roundness of corners

img{
border-radius:15px;
}

Convert to Round/Circle style Images

We see profile pictures and other images as a circle, this can be done with the same border-radius property, on setting it to 50%. Note: This also works for many other elements not only images.

img{
border-radius:50%;
}

Add Border to Image with CSS

We add a border using the border: attribute,

img{
border: 5px solid blue;
}

5px indicates the width of the border, next one the style of the border like solid, dotted, dashed, and color next. We can also add some padding to separate the border and image.

img{
border: 5px solid blue;
padding:5px;
}

Making Images Responsive

This might be one of the biggest problems, Responsive Images – which means images that resize automatically based on the resolution/screen size with a perfect fit. However, the solution is very simple with two lines of code.

Yes, all images become responsive, with these two lines of code.

img{
max-width:100%;
height:auto;
}

How to Center an Image

This can be done in two ways or more. I use these two methods very often.

Center an image using the margin property,

img{
display: block;
margin-left: auto;
margin-right: auto;
}

Centering DIV content, if the image is inside another div

<div>
<img src=/>
</div>

div{
text-align:center;
}

Add Box Shadow to Image with CSS

We can add shadows using the box-shadow: property, smoothness, spread, and intensity of the shadow can be modified.

img{
box-shadow:  18px 18px 36px #d9d9d9,
             -18px -18px 36px #ffffff;
}

Image Float on Hover

We can use this box-shadow property and apply it on :hover, in such a way that when we move our mouse over the image the shadow appears and the image looks like floating above the plane.

img:hover{
box-shadow:  18px 18px 36px #d9d9d9,
             -18px -18px 36px #ffffff;
}

Opacity and Fading Image

we can alter the visibility/opacity of the images using the opacity: property.

The image appears to be a bit faded.

img{
opacity: 0.8;
}

Conclusion – Style Images

I have showcased some of the most common properties that I know, however, there can be different methods to do the same in different ways. I hope you found this helpful, more posts on web development. Until next time, cheers.