Images

Written by

in

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
Circular And Elliptical Images
Bordered Images
Image Filters

Image as a Card
Center an Image
Text Inside Image
Image Fade In Overlay

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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;img src="/css/images/pink-flower.jpg" alt="pink-flower"&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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%;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;img src="/css/images/pink-flower.jpg" alt="pink-flower"&gt;&lt;img src="/css/images/pink-flower.jpg" 
     style="height: 50px" alt="pink-flower"&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;img src="/css/images/pink-flower.jpg" alt="pink-flower"&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h4&gt;Blur Filter&lt;/h4&gt;&lt;img style="filter: blur(3px);" src="/css/images/pink-flower.jpg"&gt;&lt;h4&gt;Invert Filter&lt;/h4&gt;&lt;img style="filter: invert(110%);" src="/css/images/pink-flower.jpg"&gt;&lt;h4&gt;Saturate Filter&lt;/h4&gt;&lt;img style="filter: saturate(8);" src="/css/images/pink-flower.jpg"&gt;&lt;h4&gt;Sepia Filter&lt;/h4&gt;&lt;img style="filter: sepia(110%);" src="/css/images/pink-flower.jpg"&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="polaroid-image"&gt;&lt;img src="/css/images/red-flower.jpg" alt="Flower"&gt;&lt;div class="box"&gt;&lt;p&gt;Tree&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;img src="/css/images/logo.png"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;img src="/css/images/red-flower.jpg" 
            width="1000px" height="350px"&gt;&lt;h3 class="center"&gt;
        Text at Center
    &lt;/h3&gt;&lt;h3 class="top-left"&gt;
        Text at Top Left
    &lt;/h3&gt;&lt;h3 class="top-right"&gt;
        Text at Top Right
    &lt;/h3&gt;&lt;h3 class="bottom-left"&gt;
        Text at Bottom Left&lt;/h3&gt;&lt;h3 class="bottom-right"&gt;
        Text at Bottom Right
    &lt;/h3&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="img-container"&gt;&lt;div class="img-overlay"&gt;&lt;div class="overlay-text"&gt;TutorialsPoint&lt;/div&gt;&lt;/div&gt;&lt;img src="/css/images/see.jpg" alt="See Image"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply Cancel reply

More posts