Problems with z-index

[dushanbe-design]

Hello everyone, What i’m actually trying to accomplish here, is to have 2 divs 1st div is called imgContainer, and 2nd is imgContainer-unutrasnji. imgContainer-unutrasnji holds the image that I want to go behind the 1st div, and I did that using z-index, but i faced problem when i linked the image. The image is unclickable because it is behind the 1st div. so.. any ideas how to solve this issue ? Here is the online version of this page: http://poledanceakademija.com/Artist/mojeslike.html

`#imgContainer {
width: 165px;
height: 167px;
background-image:url(images/imageContainer.png);
transition: background-image 0.8s ease-in-out;
background-repeat: no-repeat;
margin-right: 29px;
float: left;
margin-bottom: 28px;
padding-top: 10px;
padding-left: 10px;
z-index: 1;
}

imgContainer:hover {

background-image:url(images/imageContainer-over.png); }

imgContainer-unutrasnji {

width: 156px;
height: 158px;
z-index: -1;
position: absolute;
}

[Paulie_D]

Could you make a reduced case in Codepen?

I’m thinking that pointer-events, a rejigging of the mark-up &/or use of pseudo-elements might be offer a number of solutions.

[dushanbe-design]

Hmm i have actually never used any of those :/

[Author]

Posts