CSS Styling Images

Images play an important role in any webpage. Though it is not recommended to include a lot of images, but it is still important to use good images wherever required.

CSS allows you to adjust how the image displays on the page. This can be really useful for keeping your pages consistent. By setting styles on all images, you create a standard look for your images.

CSS plays a good role to control image display. You can set the following image properties using CSS.

  • The border property is used to set the width of an image border.

  • The height property is used to set the height of an image.

  • The width property is used to set the width of an image.

  • The -moz-opacity property is used to set the opacity of an image.

Border Image

The height and width properties are used to set the height and width of an element.

The border property of an image is used to set the width of an image border. This property can have a value in length or in %.


The height and width can be set to auto (this is default. Means that the browser calculates the height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the containing block.

Example -

Rounded Images

Bird  Bird

Example -

Here is an more example of a Rounded Images:

Example -

Thumbnail Images

Which property is to be used in CSS to create a thumbnail image? The thumbnail image should have border like the following image

Use the border property to create thumbnail images.

Example -

Thumbnail Image Hover

Example -

Polaroid Images / Cards

A polaroid picture is an iconic image of how pictures used to be. It is strange to see them on a computer but they are also a great way to display images. The images are placed on a white background with a caption underneath the images. In this tutorial we are going to display images in a polaroid style using just CSS.

Example -

Responsive Images

Responsive images are an important component of responsive Web design (RWD), a design strategy developed by Ethan Marcotte to cope with the amazing popularity of mobile devices for viewing the Web. Ethan recognized that the previous best practice — developing separate websites for different types of devices — simply couldn’t cope with the astonishing variety of devices Web users might employ to access the websites we build.

The website looks gorgeous on computers with super–high-resolution displays because it includes a high-resolution version of the main image. Delivering that image file doesn’t come cheap, though; its 1940 × 1229 pixels make the image 446 KB in size after compression.

The website could use that same image file for all users without compromising the visual experience. Web browsers on smaller devices such as smartphones would resize it to fit the display. While that approach would preserve the visual appeal of the website, the overall user experience would suffer significantly.

Responsive images will automatically adjust to fit the size of the screen.

Example -

Transparent Image(Opacity)

The opacity-level describes the transparency-level, it ranges from 0.0 to 1.0. The level 0.0 is completely transparent, 0.5 is 50% see-through and level 1.0 is not transparent. Opacity has a default initial value of 1 (100% opaque).

You can create Transparent Background Images by using the CSS property opacity.

Forest  Forest

The first image is the opacity level 1.0 and second image we set opacity level 0.2.

Example -

Flip an Image

CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.

You can flip images with CSS! Possible scenario: having only one graphic for an "arrow", but flipping it around to point in different directions.

Example -

Image Modal (Advanced)

A CSS-only, responsive image gallery that;

  • Opens an image enlargement in a modal overlay/lightbox
  • Has "previous" and "next" controls to cycle through the gallery from within the modal overlay/lightbox
  • On a small screen, the "previous" and "next" controls become extra large tappable areas for easy finger jabbing
  • Uses CSS transitions to animate a gentle fade effect (on thumbs and modal overlay/lightbox)
  • Includes optional image captions (inside the modal overlay/lightbox)

Example -

Image Filters

Using one or more newer CSS properties (background-blend-mode, mix-blend-mode, or filter) gives us a surprising amount of possibilities to manipulate a single source image.

To use the CSS filter property, you specify a value for one of the following functions listed above. If the value is invalid, the function returns "none." Except where noted, the functions that take a value expressed with a percent sign (as in 34%) also accept the value expressed as decimal (as in 0.34).

Bird  Bird  Bird

CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

Where is one of:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - for applying SVG filters
  • custom() - "coming soon"

Example -