Unable to add interactive elements in second slot

[gverapereaenvoy]

I'm trying to add interactive elements (buttons) on top of the second image, not sure if it's due a z-index issue with the first image but the button is visible but not clickable. If i try to add a button on the first image it works perfectly. Any idea if it's possible to add clickable elements on the second image?

My code:

                <img-comparison-slider handle class="before-after-item">
                    <div slot="first" class="before">  
                        <img class="before-after-image" src="./images/before_image" />
                    </div>
                    <div class="after" slot="second">
                        <img class="before-after-image" src="./images/after_image" />
                        <div class="hotspot" id="hotspot-2">
                            <button class="hotspot-content" id="hotSpotButton">
                                TESTING
                            </button>
                        </div>
                    </div>
                </img-comparison-slider>