I am struggling to achieve a specific design for my bootstrap card. The card is filled with an image and I have placed text on top of it, which is made visible by using a transparent overlay. I would like the overlay to be slanted, similar to the effect seen on the cards on the homepage of .
Here is the HTML structure of my card:
<div class="card border-0" style="width:100%;">
<img class="card-img-top" src="IMAGE HERE" alt="Card image">
<div class="card-img-overlay">
</button>
<div class="bottom text-light">
SOME TEXT OVER IMAGE HERE
</div>
</div>
</div>
And here are the styles applied to the card:
.card {
box-shadow: 1 3px 1px 1 rgba(1, 1, 3, 0.6);
transition: 0.3s;
width: 100%;
border-radius: 15px;
padding: 3px;
}
.card:hover {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.4);
}
/* Applying dark filter on card image */
.card-img-top {
width: 100%;
height: 350px;
object-fit: cover;
filter: brightness(85%);
border-radius: 15px;
padding: 2px;
}
/* Aligning heading text to bottom of the photo */
.bottom {
position: absolute;
right: 0;
left: 0;
padding: 15px;
bottom: 0px;
padding-bottom: 15px;
background-color: rgba(12, 23, 23, 0.6);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}