CSS - Images

Previous
Quiz
Next

In this article, we will learn about how to style an image to change its shape, size, and layout by using different CSS properties such as padding, borders, height, width, margins, etc.

Table of Contents


 

Round Cornered Images

The following example demonstrates how to use border-radius property to create rounded border image.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            width: 100px;
            height: 100px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <img src="/https/www.tutorialspoint.com/css/images/pink-flower.jpg" alt="pink-flower">
</body>

</html>

Circular And Elliptical Images

The following example demonstrates how to use border-radius: 50% property to create images in circle and ellipse shape. When height and width of image are same we will get a circular image and when they are not same we will get elliptical images.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <img src="/https/www.tutorialspoint.com/css/images/pink-flower.jpg" alt="pink-flower">
    <img src="/https/www.tutorialspoint.com/css/images/pink-flower.jpg" 
         style="height: 50px" alt="pink-flower">
</body>
</html>

Bordered Images

The following example demonstrates how to create a border around any images.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            border: 2px solid red;
            border-radius: 10px;
            border: 7px solid black;
            width: 150px;
        }
    </style>
</head>

<body>
      <img src="/https/www.tutorialspoint.com/css/images/pink-flower.jpg" alt="pink-flower">
</body>

</html>

Image Filters

The following example demonstrates that different filter effects are applied to an image using filter property.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        img {
            width: auto;
            height: 50px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <h4>Blur Filter</h4>
    <img style="filter: blur(3px);" src="/https/www.tutorialspoint.com/css/images/pink-flower.jpg">

    <h4>Invert Filter</h4>
    <img style="filter: invert(110%);" src="/https/www.tutorialspoint.com/css/images/pink-flower.jpg">

    <h4>Saturate Filter</h4>
    <img style="filter: saturate(8);" src="/https/www.tutorialspoint.com/css/images/pink-flower.jpg">

    <h4>Sepia Filter</h4>
    <img style="filter: sepia(110%);" src="/https/www.tutorialspoint.com/css/images/pink-flower.jpg">
</body>

</html>

Image as a Card

The following example demonstrates a responsive polaroid-styled image with a shadow effect.

<!DOCTYPE html>
<html>

<head>
    <style>
        .polaroid-image {
            width: 60%;
            height: 200px;
            background-color: white;
            box-shadow: 0 3px 6px 0 grey, 0 8px 16px 0 black;
            margin-bottom: 25px;
            margin: 20px;
        }
        img {
            width: 100%;
            height: 150px;
        }
        .box {
            text-align: center;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="polaroid-image">
        <img src="/https/www.tutorialspoint.com/css/images/red-flower.jpg" alt="Flower">
        <div class="box">
            <p>Tree</p>
        </div>
    </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="/https/www.tutorialspoint.com/css/images/logo.png">
    </div>
</body>
</html>

Text Inside 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 inset properties like top, bottom, right and left.

Example

<!DOCTYPE html>
<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="/https/www.tutorialspoint.com/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>

Image Fade In Overlay

Fade in overlay effect shows text when you hover over the image. There are several other overlay effects, for complete understanding checkout our tutorial on CSS overlay effects.

Let's look at an example for image fade in overlay effect.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .img-container {
                position: relative;
                width: 250px; 
        }
        .img-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7); 
            opacity: 0;
            transition: opacity 0.4s ease; 
        }
        .overlay-text {
            color: red;
            font-weight: bold;
            font-size: 25px;
            position: absolute;
            top: 40%;
            left: 20%;
        }
        .img-container:hover .img-overlay {
            opacity: 1;
        }
        img {
            width: 100%;
            height: 200px;
            display: block;
        }
    </style>
</head>

<body>
    <div class="img-container">
        <div class="img-overlay">
            <div class="overlay-text">TutorialsPoint</div>
        </div>
        <img src="/https/www.tutorialspoint.com/css/images/see.jpg" alt="See Image">
    </div>
</body>

</html>
Print Page
Previous
Next
Advertisements