'Making a button inside an img element in Bootstrap 5

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>
javascripthtmlcssbootstrap-5


Solution 1:[1]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pinal Sukhadiya

Related Questions