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

0

284
Views
Hacer un botón dentro de un elemento img en Bootstrap 5

Estoy tratando de crear un botón dentro de un elemento img, más específicamente en el medio de ese elemento img en Bootstrap 5. Ahora, la imagen no se usa como fondo en la cuadrícula y estoy usando algunas animaciones para hacer zoom: pasar el mouse. Me pregunto, ¿hay alguna manera de construir esto usando las clases Bootstrap 5 y no tomar el enfoque regular con la posición del contenedor principal relativa y la posición div del niño absoluta? El código se incluye a continuación, ¡gracias de antemano!

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

puede usar esta clase de arranque para su solución.

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