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

Last Updated : 15 Apr, 2020

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.

Program:

<!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.

Program:

<!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>                     