How to Create Image Overlay Effects in Bootstrap ?

Last Updated : 29 Feb, 2024

We will discuss how can we create an image Overlay effect using Bootstrap. we will use the Bootstrap component to build this. For using the Bootstrap component we need to first add CDN link into our file then we will start to customize our component.

Approach

In this approach, we are using Bootstrap’s “Card Image overlays” component to structure content.
We will add a CDN link to bootstrap so that it can access the classes of BootsBootstrapap easily.
We will add an image to the “src” and an alt text to the “alt” field.
And additional content that we want to add.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <title>Document</title>
</head>
 
<body>
    <div class="container">
        <div class="card bg-dark text-white">
            <img src=
"https://www.geeksforgeeks.org/wp-content/uploads/javascript.png"
                 class="card-img" alt="profile-image">
            <div class="card-img-overlay">
                <h5 class="card-title ">Card title</h5>
                <p class="card-text ">This is a wider card with
                    supporting text below as a natural lead-in to
                    additional
                    content.
                    This content is a little bit longer.</p>
                <p class="card-text ">Last updated 3 mins ago</p>
            </div>
        </div>
    </div>
</body>
 
</html>