在 Bootstrap 5 中的 img 元素内制作一个按钮

Question

我正在尝试在 img 元素内部构建一个按钮，更具体地说是在 Bootstrap 中那个 img 元素的中间 5. 现在 iamge 没有在网格上用作背景，我正在使用一些动画放大：悬停。我想知道，有没有一种方法可以使用 Bootstrap 5 类而不是采用父容器相对位置和子容器 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">
            <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>

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

您可以使用此 bootstrap class 作为您的解决方案。

在 Bootstrap 5 中的 img 元素内制作一个按钮

Making a button inside an img element in Bootstrap 5

html

javascript

css

bootstrap-5