Making a button inside an img element in Bootstrap 5-CodePudding

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 >
    <div >
      <div >
        <div >
            <img src="images/netflix.png" style="height: 50vh; width: 
auto;" alt="">

<!----------- THE BUTTON, our main suspect ---------------->
          <button >
          <a href=""> MORE </a> 
          </button> 

        </div>  
      </div>

CodePudding user response：

<div >
    <div >
        <div >
            <div
                >
                <img src="images/netflix.png"  style="height: 50vh; width: auto;" alt="">

                <!----------- THE BUTTON, our main suspect ---------------->
                <button >
                    <a href=""> MORE </a>
                </button>

            </div>
        </div>
    </div>
</div>

you can use this bootstrap class for your solution.