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.

How Style an Image in CSS
Different ways to Style Images

CSS Image Opacity
CSS Image Filter
CSS Image Shadow Effect
CSS Image As Background
CSS Image Border

CSS Image As Border
Position Text in Image
CSS Image Object Fit
Center an Image
Image Hover Overlay Effect

How Style an Image in CSS?

Setting the Size: In CSS, height and width properties 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, border property can be used to set border color, style and thickness.
Shadow Effect: Adding a shadow effect around image using box-shadow property 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

The height and width property 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.

<html>
<head>
</head>
    <body>
        <h2>Dimensions in length - 100px</h2>
        <img style="height: 100px; width: 100px;"  
             src="/css/images/orange-flower.jpg" 
             alt="orange-flower">

        <h2>Dimensions in percentage - 30%</h2>
        <!-- Occupy 30% height and width of body -->
        <img style="height: 30%; width: 30%;" 
             src="/css/images/orange-flower.jpg"  
             alt="orange-flower">

        <h2>Dimensions - auto</h2>
        <!-- Height adjusted in such a way that aspect
          ratio of image maintained for width 100px -->
        <img style="height: auto; width: 100px;"  
             src="/css/images/orange-flower.jpg" 
             alt="orange-flower">
    </body>
</html>

CSS Image Opacity

The opacity property in CSS is used to adjust the transparency of an element.

The opacity value can range from 0.0 (completely transparent) to 1.0 (completely opaque).

Example

Here is an example:

<html>
<head>
<style>
   img {
      border: 2px solid black; 
      height: 70px;
      width: auto
   }
</style>
</head>
<body>
    <h3>Image Opacity 0.9</h3>
    <img style="opacity: 0.9;" 
         src="/css/images/red-flower.jpg" 
         alt="opacity 0.9">

    <h3>Image Opacity 0.5</h3>
    <img style="opacity: 0.5;" 
         src="/css/images/red-flower.jpg" 
         alt="opacity 0.5">
    
    <h3>Image Opacity 0.2</h2>
    <img style="opacity: 0.2;" 
         src="/css/images/red-flower.jpg" 
         alt="opacity 0.2">
</body>
</html>

CSS Image Filter

The filter property 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

<html>
<head>
    <style>
        img{
            height: 70px;
            width: auto;
        }
    </style>
</head>
<body>
    <h3>No Filter</h3>
    <img src="/css/images/scenery2.jpg">

    <h3>Filter blur</h3>
    <img style="filter: blur(5px);" 
         src="/css/images/scenery2.jpg" >

    <h3>Filter grayscale</h3>
    <img style="filter: grayscale(80%);" 
         src="/css/images/scenery2.jpg" >

    <h3>Filter saturate</h3>
    <img style="filter: saturate(40%);" 
         src="/css/images/scenery2.jpg" >
</body>
</html>

CSS Image Shadow Effect

In CSS, the box-shadow property 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.

<html>
<head>
<style>
   img{
      object-fit: none;
      height: 50px;
      width: auto;
   }
   .img2{
      box-shadow: 20px 20px 10px 
                rgb(247, 174, 187);
   }
   .img3{
      box-shadow: -20px 20px 10px 
                rgb(247, 174, 187);
   }
</style>
</head>
<body>
    <h3>Box shadow on image: None</h3>
    <img src="/css/images/scenery2.jpg">

    <h3>Box shadow on image</h3>
    <img class="img2" src="/css/images/scenery2.jpg">

    <h3>Box shadow on image:negative value</h3>
    <img class="img3" src="/css/images/scenery2.jpg">
</body>
</html>

CSS Image As Background

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

The background-image property 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.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    div{
        background-color: rgba(255, 255, 255);
        opacity: 70%;
        padding: 20px;
    }
    body {
        background-image: url(/css/images/logo.png);
        height: 350px;
    }
</style>
</head>
<body>
    <div>
        <h1>Welcome to My Website</h1>
        <p>
            This is an example of setting a 
            background image using CSS
        </p>
    </div>
</body>
</html>

CSS Image Border

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

The border-radius property in CSS is used to define the rounded corners for border of an image. By adjusting the border-radius value, 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.

<html>
<head>
<style>
    img{
        border: 5px solid black; 
        margin-bottom: 5px;
        height: 100px;
        width: 100px;
    }
    .border-radius20{
        border-radius: 20px;
    }
    .border-radius50{
        border-radius: 50%;
    }
</style>
</head>
<body>
    <h4>Image Border</h4>
    <img src="/css/images/white-flower.jpg"
         alt="white-flower">

    <h4>Image Border Radius 20px</h4>
    <img src="/css/images/white-flower.jpg" 
         class="border-radius20"
         alt="white-flower">

    <h4>Image Border Radius 50%</h4>
    <img src="/css/images/white-flower.jpg" 
         class="border-radius50"
         alt="white-flower">
    </body>
</html>

CSS Image As Border

CSS also allows to set images as borders for other element like div, span, body, paragraph etc using border-image property .

Example

In this example we set border image for div.

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    div{
        background-color: #f0f0f0;
        border: 20px solid transparent;
        border-image: url(/css/images/border.png) 40;
        padding: 20px;
    }
    body {
        height: 350px;
    }
</style>
</head>
<body>
    <div>
        <h1>Welcome to My Website</h1>
        <p>
            This is an example of setting a 
            background image using CSS
        </p>
    </div>
</body>
</html>

Position Text in an Image

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

First we need to set position property for image container as `position: relative` and position property of text as `position: absolute`. Now you can position of text elements using top, left, right and bottom properties.

Example

<html>
<head>
<style>
   .container {
      position: relative;
      border: 2px solid #ef2c2c;
   }
   .center {
      position: absolute;
      top: 45%;
      width: 100%;
      text-align: center;
   }
   .top-left {
      position: absolute;
      top: 12px;
      left: 30px;
   }
   .top-right {
      position: absolute;
      top: 12px;
      right: 30px;
   }
   .bottom-left {
      position: absolute;
      bottom: 12px;
      left: 30px;
   }
   .bottom-right {
      position: absolute;
      bottom: 12px;
      right: 30px;
   }
   img {
      width: 100%;
      opacity: 0.7;
   }
</style>
</head>
<body>
   <div class="container">
      <img src="/css/images/red-flower.jpg" 
            width="1000px" height="350px">

      <h3 class="center">
         Text at Center
      </h3>
      <h3 class="top-left">
         Text at Top Left
      </h3>
      <h3 class="top-right">
         Text at Top Right
      </h3>
      <h3 class="bottom-left">
         Text at Bottom Left</h3>
      <h3 class="bottom-right">
         Text at Bottom Right
      </h3>
   </div>
</body>
</html>

CSS Image Object Fit

The object-fit property 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.

<html>
<head>
<style>
   img {
      border: 2px solid black; 
      margin-bottom: 5px; 
      height: 200px; 
      width: 200px;
   }
</style>
</head>
<body>
    <div>
        <h3>object-fit: fill</h3>
        <img style="object-fit: fill;" 
             src="/css/images/white-flower.jpg" 
             alt="object-fit: fill">
    </div>
    <div>
    <h3>object-fit: cover</h3>
    <img style="object-fit: cover;" 
         src="/css/images/white-flower.jpg" 
         alt="object-fit: cover">
    </div>
</body>
</html>

Center an Image

There are several way to center an image inside a container, most popular way is to use flex layout with justify-content and align-items properties.

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

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: flex;          
            justify-content: center; 
            align-items: center;    
            height: 300px;           
            border: 2px solid black; 
        }

        img {
            max-width: 100%;        
            height: auto;         
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div class="container">
        <img src="/css/images/logo.png">
    </div>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container2:hover .image {
  opacity: 0.3;
}

.container2:hover .middle {
  opacity: 1;
}

.text2 {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
.imgg:hover {
  transform: scaleX(-1);
}


</style>
</head>
<body>
    <h2>Fade in Overlay</h2>
    <div class="container">
        <img src="/html/images/logo.png" 
            alt="Avatar" class="image">
        <div class="overlay">
            <div class="text">
                Hello World
            </div>
        </div>
    </div>

    <h2>Fade in a Box</h2>
    <div class="container2">
        <img src="/html/images/logo.png" 
            alt="Avatar" class="image">
        <div class="middle">
        <div class="text2">
            Sign In
        </div>
        </div>
    </div>

    <h2>Hover to Flip an Image</h2>
    <img src="/html/images/logo.png" 
        class="image imgg" >

</body>
</html>

Print Page

CSS - Styling Images

Table of Contents

How Style an Image in CSS?

Set Image Dimensions

Example

CSS Image Opacity

Example

CSS Image Filter

Example

CSS Image Shadow Effect

Example

CSS Image As Background

Example

CSS Image Border

Example

CSS Image As Border

Example

Position Text in an Image

Example

CSS Image Object Fit

Example

Center an Image

Example

Image Hover Overlay Effect

Example