CSS - Styling Images

CSS provides several properties to style images in a HTML webpages. In this tutorial we will learn how to style any type of image using CSS properties.

Table of Contents

How Style an Image in CSSCSS Image OpacityCSS Image FilterCSS Image Shadow EffectCSS Image As BackgroundCSS Image BorderCSS Image As BorderPosition Text in ImageCSS Image Object FitCenter an ImageImage Hover Overlay Effect

How Style an Image in CSS?

• Setting the Size:In CSS,heightandwidthproperties can be used to adjust size of images in a webpage.
• Style the Border:Borders with right thickness and color make image stand out. In CSS,borderproperty can be used to set border color, style and thickness.
• Shadow Effect:Adding a shadow effect around image usingbox-shadowproperty enhances image style.
• Hover Effect:Interactive styling like hover effect change the appearance of image when user hover the mouse over images. This can include changes in opacity, size (using transforms), or applying filters.
• Responsive Design:To render multiple images you can use flex or grid layout systems and by using media query you can adjust layout based on user’s screen width.

Set Image Dimensions

Theheightandwidthproperty is used to set the dimensions for an image. These properties can have a value in length(pixels, em) or percentage.

• Pixel Value:Set dimensions in pixels
• Percentage Value:Percentage of parents elements dimensions to occupy.
• Value ‘auto’:Allows to maintain original aspect ratio of image.

Example

Here is an example shows how to set dimensions for an image.

CSS Image Opacity

Theopacityproperty in CSS is used to adjust the transparency of an element.

The opacity value can range from0.0(completely transparent) to1.0(completely opaque).

Example

Here is an example:

CSS Image Filter

Thefilterproperty in CSS is used to apply visual effects to an element, such as blurring, inverting colors, adjusting brightness and contrast, or applying filters like grayscale.

Example

This example show how to add filter in css

CSS Image Shadow Effect

In CSS, thebox-shadowproperty used to add shadow effect around images.

A box shadow is described by horizontal and vertical offsets relative to the element, blur and spread radius, and color. Following is the syntax of box-shadow:

img { 
    box-shadow: inset horizontal vertical
                blur-radius spread-color; 
}

Example

In this example we will create positive and negative shadows.

CSS Image As Background

CSS allows an image to be set as a background for another element like div, span, body, paragraph etc.

Thebackground-imageproperty is used to set one or more than one image as a background.

Note: You can add multiple images as background. You just need to separate the images using comma.

Example

In this example we set background image for body.

CSS Image Border

Theborderproperty is used to set style(solid or dashed), thickness and color for border of an image.

Theborder-radiusproperty in CSS is used to define the rounded corners for border of an image. By adjusting theborder-radiusvalue, you can control the degree of roundness for each corner of an element or make them fully circular.

/* Sharp edged border */
img{
    border: 5px solid black; 
}

/* Round edged border */
img{
    border: 5px solid black; 
    border-radius: 5px;
}

/* Circular Border */
img{
    border: 5px solid black; 
    border-radius: 50%;
}

Example

Here is an example that shows how to add border to an image.

CSS Image As Border

CSS also allows to set images as borders for other element like div, span, body, paragraph etc usingborder-imageproperty .

Example

In this example we set border image for div.

Position Text in an Image

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

First we need to set position property for image container asposition: relativeand position property of text asposition: absolute. Now you can position of text elements usingtop,left,rightandbottomproperties.

Example

CSS Image Object Fit

Theobject-fitproperty specifies how the image should be resized if its aspect ratio is not maintained. This property resizes an image to fit in its container.

Example

Here is an example that shows how to use this property.

Center an Image

There are several way to center an image inside a container, most popular way is to use flex layout withjustify-contentandalign-itemsproperties.

• 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

Image Hover Overlay Effect

CSS allows to create Overlay effect images when hovered over them. We achieve this using transform property.

Example

Following example shows two overlay effect and flip effect.