Horje
How to Create Image Overlay Effects in Bootstrap ?

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=
"/archive/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>

Output:



 


Reffered: https://www.geeksforgeeks.org

Bootstrap

Related
Create a Weather Template App using CSS &amp; Bootstrap Create a Weather Template App using CSS &amp; Bootstrap
Design a Google Chrome Page Template using Bootstrap Design a Google Chrome Page Template using Bootstrap
Create a Portfolio Gallery using Bootstrap Create a Portfolio Gallery using Bootstrap
Design a Job Search Portal using Bootstrap Design a Job Search Portal using Bootstrap
Design a Contact Page with a Map using Bootstrap Design a Contact Page with a Map using Bootstrap

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje