CSS Styling Images

CSS helps us to style the image elements using various styling properties. We can crop them, add hover effects add animations and transitions etc.

Here are some of the popular styling effects we can put on images using CSS

Image Borders

Changing the border properties of the image can help us crop or display it in certain shapes.

For example is you want to display a rounded-image, you can use the border-radius property to crop out a round part.

Similarly, you can display different image thumbnails using proper border values.

Image with border


Image Border with padding


Image border radius

Round Image


Round Image border


Responsive Images

Like any other element, images can also be made responsive to the change in the browser window/ screen.

We can use the max-width, width and height properties to achieve this effect. The image will then shrink or grow as per the screen size.

setting width to 100% will make image responsive.


Image Centre

Setting the left and right margin to auto, also set the display block. Then the element can be centrally aligned.


Center Image inside a div


Image Opacity /Transparency

The transparency of the image can be altered to specify a certain state or for mere styling.

The value of the opacity property can be set from 0.0 to 1.0 for this purpose. Where 0.0 is fully transparent and 1.0 is complete opaque.



Text on the image can tell something about the image or even prompt the user to take any action on the image like double-click or hovering the pointer.

Text on the image



Built in CSS filters to add visual effect to the images


We can make style changes for the mouse hover. You can set the .overlay for this purpose.

On hover set image opacity of 0.8 as below



Using the scaleX(-1) value we can flip the image

Image Gallery

Not only a single image, we can display a whole gallery of images on the web-page. We can also make the gallery responsive so that it re-arranges the images to fit the screen/window size.

Beautiful images from

Image Photo by Grahame Jenkins on Unsplash