Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use image overlay correctly with Bootstrap?
The image overlay is a property by using which we can show any text, image, links and much more over an image. It allows us to set text, images or other things on an image to make it look pretty. We can us the image overlay class of bootstrap defined as card-img-overlay. This class will allow us to write text or align text over an image and use the image as a background to the text or the links we align over it.
What are the advantages of using this class provide?
It allows you to write or align the text and links over an image. Which makes it look like a background image for them.
You can use an icon or some text to show the details of the image once user hover on it.
You can also place an image over an image that have the image - overlay class of bootstrap.
Using the card-img-overlay class
The below syntax will show you the way in which you can use the card-img-overlay class with an element to overlay other elements over it −
<div class = "card"> <img class = "card-img-top" src = "" alt = ""> <p class = "card-img-overlay"></p> </div>
Let us now understand it in details by implementing it practically inside the code examples and see the practical use of it.
Steps
Step 1 − In the first step, we will define a container that contains the whole HTML code or the elements on which we will use the image overlay class.
Step 2 − In the next step, we will define a <div> element with a class named card which will form a card for us on the web page.
Step 3 − In the final step, we will define the <img> element with a class named card-img-top and two more elements one with the simple text and another with an anchor tag to show an empty link.
Example
The below example will explain how to use the image overlay property correctly with bootstrap to overlay content over an image −
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CSS CDN link included here -->
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet">
</head>
<body>
<div class = "container">
<center>
<h2> Using image overlay correctly with Bootstrap </h2>
<p> The text over the below image is coming by using the "card-img-overlay" class. </p>
<div class = "card w-40 d-block mx-auto">
<img style = "height: 300px; width: 300px;" class = "card-img-top" src = " https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1GyK6fiCHCRcizXh_dXsFBA5Idw7XayKizQ&usqp=CAU " alt = "Tutorialspoint Logo">
<p class = "card-img-overlay text-center"> This is the overlay text. </p>
<a class = "card-img-overlay text-center pt-5" href = "#"> This is the overlay link. </a>
</div>
</center>
</div>
</body>
</html>
In the above example, we have used the card-img-overlay class with the elements which we want above the image or as the overlay text for the image. This class will set the elements over the image which will be seems like a background image of the text.
Let us see one more code example to see the implementation of the image overlay class with some other overlay element like icon.
The algorithm of this example and the above example is almost same you just need to change the element that contains the image overlay class with some other element of font-awesome icon.
Example
The below example will illustrate the use of the image overlay class with the elements that does not contains text as content instead contains an icon −
<html>
<head>
<!-- Bootstrap CSS CDN link included here -->
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel = "stylesheet"></head>
<!-- Font Awesome script CDN is included here -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" ></script>
<body>
<div class = "container">
<center>
<h2> Using image overlay correctly with Bootstrap </h2>
<p> The text and the fontawesome icon over the below image is coming by using the "card-img-overlay" class. </p>
<div id = "my-card" class = "card w-40 d-block mx-auto">
<img style = "height: 150px; width: 300px;" class = "card-img-top" src = "https://www.tutorialspoint.com/cg/images/logo.png" alt = "Tutorialspoint Logo">
<p class = "card-img-overlay text-center"> This is the overlay text. </p>
<i id = "icon" class = "fas m-auto card-img-overlay text-center fa-search-plus"></i>
<a class = "card-img-overlay text-center pt-5" href = "#"> This is the overlay link. </a>
</div>
</center>
</div>
<script>
var card = document.getElementById('my-card');
card.addEventListener('mouseover', function (){
card.style.opacity = "0.5";
});
card.addEventListener('mouseout', function (){
card.style.opacity = "1";
});
</script>
</body>
</html>
In this example we used the text and the link as the overlay content but also used the font awesome icon as an overlay content which is visible as and zoom in icon over the image in the middle. In this way you can use the different types of content as the overlay content for an image using the image overlay class in bootstrap.
In this article, we have learned about the use of the image overlay class correctly with bootstrap and use an image as a background image for the texts, links and the icons. We have seen and understand the practical implementation of it with the help of two different code examples. In the former example, we used simple text and the link as the overlay content. While in the later one, we used text, link as well as an font-awesome icon as the overlay content for the image.
3K+ Views
