Position: Absolute only makes last button in a carousel correctly clickable Options

[zoe9216]

Hello,
I have been unable to solve this problem for quite some time. My carousel (codepen: https://codepen.io/zoe9216/pen/rNqxdGN) has three slides each with an image, text and a button with a unique href. Problem is:
1) Buttons of first two slides are only partially clickable. Only when I move pointer to a position that overlaps with button on 3rd slide (even when that slide isnt selected) can I click.
2) The href upon clicking is always of the last button.

position: absolute on class 'slide-img' is causing this problem. When i change it to position: relative all buttons are perfectly clickable with correct href. However, the display pf slides gets messed up.

If anyone has any experience or knowledge of this matter and they can help me I would be obliged.

[pandy]

can click all of the egg like things anywhere and I see different images and content for each button. FF 111.0.1 .

[Christian J]

Works in Vivaldi too, but the three eggs are positioned in the middle of the image and description columns.

[zoe9216]

Works in Vivaldi too, but the three eggs are positioned in the middle of the image and description columns.

The positioning is off due to Codepen not displaying it fully. In Firefox the only link that is followed is of the last button i.e. '/our-work/3' and the only place clickable in all three slides (around the button) is the position of the third and last button.
Do you not have this behavior?

[zoe9216]

can click all of the egg like things anywhere and I see different images and content for each button. FF 111.0.1 .

You mean the button with the text 'Explore'? Is it clickable fully for you on all three slides? For me on first slide top half is clickable, on second slide, bottom half. Third is perfect.

[Christian J]

In Firefox the only link that is followed is of the last button i.e. '/our-work/3'

Oh you meant the Explore button? I got confused by pandy's talk about eggs. BTW, it's easier to see the URLs outside of the Codepen frameset here: https://cdpn.io/zoe9216/fullpage/rNqxdGN?anon=true&view=

CODE

<ul class="slides">
<input type="radio" name="radio-buttons" id="img-1" checked />
<li class="slide-container">

CODE

</li>
<input type="radio" name="radio-buttons" id="img-2" />
<li class="slide-container">

CODE

</li>
<input type="radio" name="radio-buttons" id="img-3" />
<li class="slide-container">

FWIW, the above parts are invalid HTML, a UL element can only contain LI as its direct children.