Hover states not working because of stacking layers

I want the bag icon to hide behind the orange section. Just the way it is right now. But when I hover over the ellipsis and the orange section, nothing changes. When I comment out z-index: -2, the hover state works but the bag icon disappears. How should I solve this? https://codepen.io/ksblupzi-the-solid/pen/LENLmRZ
1 Reply
curiousmissfox
Im not clear what you want to happen on hover, and hovering where? on the red part? the pink part? the ::before with the background image? the reason hovering isnt working when you have z-index : -2 on .card-wrapper is youre putting it behind the body and html so your pointer cant reach it. You dont need the z-index on it. Take off the z-index and add this property:
.card-wrapper {
width: 30%;
padding-block-start: 50px;
position: relative;
/* REMOVE this z-index */
/* z-index: -2; */
background-color: pink;
/* ADD this property */
isolation: isolate;
}
.card-wrapper {
width: 30%;
padding-block-start: 50px;
position: relative;
/* REMOVE this z-index */
/* z-index: -2; */
background-color: pink;
/* ADD this property */
isolation: isolate;
}

Did you find this page helpful?