I am trying to replicate the image gallery as shown in -
The button toggles from dark to light and adds the opacity class to the targeted div but does not toggle from light to dark and also doesn’t add the opacity-1 class. Can you please tell why it is happening this way? and how can i correct this?
that very wierd the button become unclickable i tried to remove the opacity and use any other property like background-color and it work fine
i think the opacity has some effect other than the color transparent
i fixed your issue by adding the following to your button
z-index : 2;
by the way you have a missing ; at the end of this line
btn.textContent = ‘Lighten’
This is indeed due to another side effect of opacity — elements it is applied to create a new stacking context, which is part of the system by which the browser decides which elements are drawn on top of which other elements (also affected by positioning, and a bunch of other things). So applying opacity to an element can cause unintended layout effects.
I think it is something to do with the fact that originally, the button was separate from the <div>, and applying opacity to it caused it to go into a separate stacking context, which then sat behind the <div>, making it unclickable. The <div> is later in the source order, so sits on top.
When it is inside the <div>, it will go into a separate stacking context, but this is inside the <div>s parent sacking context and so will sit on top of it.