Skip to content
Related Articles

Related Articles

Improve Article

How to use image overlay correctly with Bootstrap ?

  • Last Updated : 14 Jan, 2021
Geek Week

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, links inside of that image. It can be done using ‘card-img-overlay’ property that in 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 ‘card-img-overlay’ property in bootstrap.

At first, we need all the necessary bootstrap CDNs for performing the operation. For getting those, one can simply go 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">
  
    <script src=
        integrity=
"sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous">
    </script>
      
    <style>
        .card {
            width: 270px;
            height: 400px;
            padding: 5px;
        }
  
        h1 {
            color: green;
            text-align: center;
        }
  
        img {
            height: 140px;
        }
  
        .container {
            margin-top: 50px;
            width: 600px;
            height: auto;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <center>
            <h1>GeeksforGeeks</h1>
            <div class="card r">
                <img class="card-img-top" src="green.jpg">
                <div class="card-img-overlay card-inverse">
                    <h4 class="text-stroke">
                        Image Card Overlay
                    </h4>
                      
                    <div class="card-block">
                        <a href="#" class="card-link 
                            text-white">Link
                        </a>
                          
                        <p class="card-text">Geeks</p>
                    </div>
                </div>
                  
                <a href="#" class="card-link ">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">
  
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous">
    </script>
      
    <style>
        h1 {
            color: green;
        }
  
        .images img {
            padding: 10px;
        }
  
        .col {
            position: relative;
            width: 200px;
            height: 200px;
        }
  
        .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.6;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <div class="d-flex 
            justify-content-center images">
              
            <div class="col">
                <a href="#"><img src="gfg.png" alt="d"></a>
                <div class="overlay">
                    <div class="text">Oct 30, 2020</div>
                </div>
            </div>
        </div>
    </center>
</body>
  
</html>

Output:

Before hover:

After Hover:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :