• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

283
Views
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>
    
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error