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 techniques to understand the property.
Example: 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.
<!DOCTYPE html> <html>
<head>
<link href=
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=
<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.