Skip to content
Related Articles

Related Articles

How to use image overlay correctly with Bootstrap ?

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jun, 2022

In this article, we will be learning how to use image overlay correctly with Bootstrap. But before that, first, we need to know what is an Image Overlay.

Image Overlay: Image overlay generally refers to the image being a background image and inserting texts, and links inside of that image. It can be done using the ‘card-img-overlay’ property that is present in bootstrap. Also, we can do it with normal CSS along with a bootstrap theme. Today we will be learning both the techniques to understand the property.

Example 1: Using the ‘card-img-overlay’ property in bootstrap.

At first, we need the necessary bootstrap CDN for using the bootstrap components. For getting those, one can simply go to their website and copy the links to their code. The link to the CDNs is provided below:

https://getbootstrap.com/docs/5.0/getting-started/introduction/

From there, copy all the CSS and JS files to your code.

Code:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel="stylesheet" integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous">
     
    <style>
        .container {
            margin-top: 50px;
            width: 100%;
        }
        .card {
            width: 270px;
            height: 250px;
            padding: 5px;
        }
 
        h1 {
            color: rgb(36, 168, 36);
            text-align: center;
        }
        img {
            height: 175px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <center>
            <h1>GeeksforGeeks</h1>
            <div class="card">
                <img class="card-img-top" src=
                 
                <div class="card-img-overlay card-inverse">
                    <h4 class="text-stroke text-white pb-5">
                        Image Card Overlay
                    </h4>
                     
                    <div class="card-block pt-5">
                        <a href="#" class="card-link text-white">Link
                        </a>
                         
                    </div>
                </div>
                 
                <a href="#" class="card-link pt-3">Card link</a>
            </div>
        </center>
    </div>
</body>
 
</html>           

Output:

 

In the output, the text and the link are working properly inside the image, and thus image overlay feature is demonstrated.

Example 2: (Using only CSS without using Bootstrap class): In this example, we will be demonstrating image overlay using CSS while bootstrap will be included in the code. But before writing the code, we must include the bootstrap CDNs in order to get the bootstrap effect to our website.

Code:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>With CSS</title>
    <link rel="stylesheet" href=
        integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
     
    <style>
        h1 {
            padding-top: 10px;
            color: rgb(36, 168, 36);
        }
 
        .col {
            position: relative;
            width: 200px;
            height: 225px;
        }
 
        .overlay {
            position: absolute;
            color: white;
            display: block;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: green;
        }
 
        .col:hover .overlay {
            opacity: 0.7;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div class="d-flex
            justify-content-center images">
             
            <div class="col">
                <a href="#"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png" alt="d"></a>
                <div class="overlay">
                    <div class="text pt-2">
                        <h4>Image Overlay</h4>
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
 
</html>

Output:

 

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!