https://i.sstatic.net/Yxn4P.png
Here is how I structured my HTML to include the title as a prop for Bootstrap card. Despite trying z-index, I didn't get the desired outcome.
<b-col>
<div class="card-container">
<b-card
overlay
img-src="/images/ajm.jpg"
img-alt="Card Image"
class="product-card"
title="Linear Motors"
title-tag="h5"
align="center"
></b-card>
</div>
</b-col>
CSS ----->
.product-card {
height: 353px;
border-radius: 0px;
border: 0;
color: #0c1c35;
}
.card-container {
width: 100%;
height: 100%;
:hover {
background: -webkit-linear-gradient(
90deg,
hsla(217, 100%, 50%, 1) 0%,
hsla(186, 100%, 69%, 1) 100%
);
opacity: 0.8;
color: white;
}
}