How to use links on card-img-overlay class in Bootstrap?

Last Updated : 25 Jul, 2024

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.

Bootstrap Card: A card in BootStrap 4 is a flexible and extensible content container. It includes options for headers, footers, content, colors, links etc.
Card Image Overlays: card-img-overlay is used to set the image as background image of the card and add text over the image. Syntax: For card overlay
```
<div class="card">
 <img src="..."/>
 <div class="card-img-overlay">
  <p class="text">....</p>
 </div>
</div>
```

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.

.card-link 
    { 
    position:relative; 
    }

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.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <style>
        .card {
            width: 250px;
            height: 300px;
            border: 2px solid black;
            padding: 5px;
        }
        
        h1 {
            color: green;
            text-align: center;
        }
        
        img {
            height: 120px;
        }
        
        .left {
            float: left;
        }
        
        .right {
            float: right;
        }
        
        .container {
            margin-top: 50px;
            width: 600px;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <div class="card left">
            <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200109151258/672.png" />
            <div class="card-inverse">
                <h3 class="text-stroke">GeeksforGeeks</h3>
            </div>
            <div class="card-block">
                <a href="#" class="card-link">Card link</a>
                <p class="card-text">A Computer Science Portal</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Card link is working</small>
            </div>
        </div>

        <div class="card right">
            <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200109151258/672.png" />
            <div class="card-img-overlay card-inverse">
                <h3 class="text-stroke">GeeksforGeeks</h3>
            </div>
            <div class="card-block">
                <a href="#" class="card-link">Card link</a>
                <p class="card-text">A Computer Science Portal</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Card link is not working</small>
            </div>
        </div>
    </div>
</body>

</html>

Output:

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.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
        href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <style>
       .card-link{
         position:relative;
        }
        .card {
            width: 250px;
            height: 300px;
            border: 2px solid black;
            padding: 5px;
        }

       

        h1 {
            color: green;
            text-align: center;
        }
        
        img {
            height: 120px;
        }
        
        .left {
            float: left;
        }
        
        .right {
            float: right;
        }
        
        .container {
            margin-top: 50px;
            width: 600px;
            height: auto;
        }
        
    </style>
</head>

<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <div class="card left">
            <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200109151258/672.png" />
            <div class="card-inverse">
                <h3 class="text-stroke">GeeksforGeeks</h3>
            </div>
            <div class="card-block">
                <a href="#" class="card-link">Card link</a>
                <p class="card-text">A Computer Science Portal</p>
            </div>
            <div class="card-footer">
                <small class="text-muted">Card link is working</small>
            </div>
        </div>

        <div class="card right">
            <img class="card-img-top" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200109151258/672.png" />
            <div class="card-img-overlay card-inverse">
                <h3 class="text-stroke">GeeksforGeeks</h3>
                <div class="card-block">
                    <a href="#" class="card-link text-white" >Card link</a>
                    <p class="card-text">A Computer Science Portal</p>
                </div>
            </div>
            <a href="#" class="card-link " >Card link</a>
            <div class="card-footer">
                <small>Card link is  working</small>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Note: In the second example the muted text not behaving like text because it is out of the card-link div.

How to Create Image Overlay Effects in Bootstrap ?

g_ragini

Improve

Article Tags :

How to use links on card-img-overlay class in Bootstrap?

Similar Reads

Thank You!

What kind of Experience do you want to share?