Creating a clickable button within an image container using Bootstrap 5

I am attempting to create a button inside an img element, specifically in the center of that img element within Bootstrap 5. The image is not being used as a background on the grid and I am applying some hover animations to zoom in. I am curious if there is a way to achieve this using Bootstrap 5 classes without resorting to the traditional method of using a parent container with position relative and a child div with position absolute? See the code below for reference. Thank you 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>
    

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, the prime suspect ---------------->
                <button class="btn position-absolute top-50 start-50 translate-middle">
                    <a href=""> READ MORE </a>
                </button>

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

Feel free to utilize these Bootstrap classes in your design solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Words hovering in a section next to a captivating picture

I am looking to achieve a specific arrangement: I want two different texts (in block format) to float or display inline next to an image, all within a div element. Despite trying various display settings (such as block and inline for text), I have not be ...

Another project cannot import the library that was constructed

I am in the process of creating a library that acts as a wrapper for a soap API. The layout of the library is structured like this: |-node_modules | |-src | |-soapWrapperLibrary.ts | |-soapLibraryClient.ts | |-types | |-soapResponseType.d.ts The libra ...

CSS not reflecting changes after the href of the <link> tag has been updated

Hey there, I'm a beginner in the world of programming and currently facing an issue that I need help with. My goal is to dynamically update the CSS of my webpage by using JQuery to change the 'href' value in the link tag. In order to test t ...

Add a component to another component in real-time

Check out my StackBlitz demo: DEMO I'm attempting to insert the 'table' component into the #test section of the app component when the visualization type is 'table'. To achieve this, I am using the createTable() function which gen ...

Unable to pinpoint the source of the excess spacing within a form field

There appears to be some extra space in the text field of my form, extending beyond the container margin. Please refer to the image and JSFiddle http://jsfiddle.net/GRFX4/. Any thoughts on what might be causing this issue? Thank you. HTML: <div id="co ...

Optimal guidelines for logging in

After successfully creating a website using HTML, CSS, and JavaScript, I am now looking to implement a login feature to provide privacy for certain users. I have noticed that some developers use PHP, while others use JS or Node.js for this purpose. However ...

Is there a more efficient method for creating HTML with coffeescript / jQuery besides using strings?

Today marks my first attempt at creating a "answer your own question" post, so I hope I am on the right track. The burning question in my mind was, "Is there a more efficient way to generate HTML with jQuery rather than using tag strings?" My goal is to c ...

Using Ajax.ActionLink to pass a parameter in JavaScript

When I call a controller in this manner: @Ajax.ActionLink("Clients", "ClientAccountsPartialView", new { entityCode = -1, taxNumber = -1, country = 1, ...

When attempting to retrieve JSON data for the second time, AJAX fails to fetch the information

After successfully sending an Ajax request to a php file and receiving a JSON array of the submitted data, I encountered an error on the second attempt. The error message reads: SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSO ...

What steps do I need to take in order to implement a basic ZeroClipboard copy-to-clipboard feature in jQuery on jsFiddle with just one click?

I'm having trouble implementing ZeroClipboard in a jQuery environment. My goal is to have the text within each div with the class copy copied when clicked. The following jsFiddle demonstrates the functionality with double click using the stable ZeroC ...

Angular: sending the user input to the component

I'm trying to link the value of an HTML input field to a variable 'numToAdd' in my component, and then increment the 'numToAdd' variable by 1. However, I'm facing difficulties passing the input value to the component variable. ...

Animating elements with CSS keyframes for scaling and translating transformations

I'm having trouble manipulating the size and position of an absolutely positioned div. Even after scaling, the div doesn't end up where I intended it to be in my keyframe animation. I suspect that this issue is caused by the fixed coordinates of ...

The scrolling experience in Next js is not as smooth as expected due to laggy MOMENTUM

Currently, I am in the process of constructing my portfolio website using Next.js with Typescript. Although I am relatively new to both Next.js and Typescript, I decided to leverage them as a learning opportunity. Interestingly, I encountered an issue with ...

Reducing size and Assembling JavaScript and CSS

I find myself in a bit of a dilemma when it comes to using just one JS file and one CSS file for a website. Let me elaborate: As someone who mainly works with CMS platforms like Joomla, I often run into issues during page speed tests where experts recomme ...

Calculating the total price of items in a shopping cart by multiplying them with the quantity in Vue.js

I am currently working on enhancing the cart system in Vue.js, with a focus on displaying the total sum of product prices calculated by multiplying the price with the quantity. In my previous experience working with PHP, I achieved this calculation using ...

Rewriting URLs with parameters can be achieved using the .htaccess file

I am looking to update my URLs from the following format: www.website.com/?page=about www.website.com/?page=info www.website.com/?page=contact To this new structure: www.website.com/about www.website.com/info www.website.com/contact Is there a way to a ...

Selecting the appropriate technology or library for incorporating user-defined text along a designated path within established areas

I am currently developing an admin dashboard with CodeIgniter 2 that allows the admin to upload custom images, particularly ones with blank spaces for text overlay. The goal is to enable regular users to add their desired text in specific areas defined by ...

Count Scroller - Finding a Solution for _.debounce

Issue with Counter I have a counter that should increase or decrease by one each time the user scrolls up or down. The problem I'm facing is that my counter $('html').on('mousewheel', function (e) { var delta = e.originalEve ...

Are node.js and AngularJS connected in any way?

Node.js relies on npm for package management, while AngularJS CLI also uses npm for its modules. Is there a connection between these two? I have installed Node.js and tested it with a simple 'hello.js' file containing just one line of code: con ...

When the document is fully loaded on a page that has been dynamically loaded

Currently utilizing the following: $("#someDiv").load("ajax.html") The contents of "ajax.html" include a document.ready call: <script>$(function() { alert('works') })</script> I'm interested to know exactly when this callbac ...