How to use image overlay correctly with Bootstrap ?

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="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"        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=                "https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png">                                 <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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"        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.
sanjyotpanure
Bootstrap-Misc
CSS-Misc
HTML-Misc
Picked
Bootstrap
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set vertical alignment in Bootstrap ?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form