Skip to content
Related Articles

Related Articles

How to use image overlay correctly with Bootstrap ?
  • Last Updated : 14 Jan, 2021

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>             

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Before hover:

After Hover:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :