I am trying to build a button inside inside an img element, more specifically in the middle of that img element in Bootstrap 5. Now the iamge is not used a background on the grid and I am using some animations to zoom in on :hover. I am wondering, is there a way to build this using Bootstrap 5 classes and not taking the regular approach with parent container position relative & child div position absolute? code is included below, thanks in advance!
<div class="col-md-6 min-vw-50 min-vh-100 px-0">
<div class="row mx-0 px-0">
<div class="col-md-6 px-0">
<div class=" border border-white border-5 img-hover-zoom img-
hover-zoom--slowmo button-container">
<img src="images/netflix.png" style="height: 50vh; width:
auto;" alt="">
<!----------- THE BUTTON, our main suspect ---------------->
<button class="btn">
<a href=""> MORE </a>
</button>
</div>
</div>
<div class="col-md-6 min-vw-50 min-vh-100 px-0">
<div class="row mx-0 px-0">
<div class="col-md-6 px-0">
<div
class=" border border-white border-5 img-hover-zoom img- hover-zoom--slowmo button-container position-relative">
<img src="images/netflix.png" class="img-fluid" style="height: 50vh; width: auto;" alt="">
<!----------- THE BUTTON, our main suspect ---------------->
<button class="btn position-absolute top-50 start-50 translate-middle">
<a href=""> MORE </a>
</button>
</div>
</div>
</div>
</div>
you can use this bootstrap class for your solution.