How to use links on card-img-overlay class in Bootstrap 4 ?
When we put any link inside of a bootstrap card it performs well until we used card-img-overlay to put an image as a background of that card.
Approach: All the links placed inside class card-img-overlay works but links placed outside this class do not work. To make these links work, set the position of these links ‘relative’.
CSS Code: Place this inside the <style> tag.
Below example illustrates the approach:
Example 1: This example illustrates card card-img-overlay, in the 1st card we are not using the card-img-overlay but when we use the card-img-overlay the links are not working even text is not responding as a text. It totally behaves likes a picture.
Example 2: This example illustrates card card-img-overlay, in the 1st card we are not using the card-img-overlay but when we use the card-img-overlay the links are working and text are also behaving as text.
Note: In the second example the muted text not behaving like text because it is out of the card-link div.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses
are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!