Hover effect on PNG image - html

Question

When I hover my mouse on the background of the image, the 3D effect triggers, but when I move over the girl image area, it doesn't trigger anymore. The transparent image is overlaying the background. How do I make it triggers when the mouse is over the girl image?
See what I did on JSFIDDLE
HTML -
<div class="test-imgplace">
<img src="https://christianluneborg.com/imgs/test-woman.png" class="imgtest">
<div class="card-hover">
<div class="card">
<div class="card-content">
<div class="image" style="background-image: url(https://christianluneborg.com/imgs/test-woman-bg.png);"></div>
</div>
</div>
</div>
</div>
CSS -
.card .image{
height: 275px;
width: 183px;
background-size: cover;
background-position: center center;
}
.imgtest {
position: absolute;
z-index: 1;
text-align: center;
top: 0;
left: 100px;
border: solid 1px;
}
.test-imgplace {
margin: 0 auto;
position: relative;
overflow: hidden;
}
.card .text{
height: 20%;
margin: 0;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
font-size: 50px;
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.card{
width: 183px;
height: 275px;
margin: auto auto;
background: #383030;
border-radius: 5px;
overflow: hidden;
text-align: center;
}
.card-content{
transform-style: preserve-3d;
}
body{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hover-in{
transition: .3s ease-out;
}
.hover-out{
transition: .3s ease-in;
}
.card-hover{
margin:0;
}

Answer 1

When the mouse hovers over the semi-transparent image, it causes mouse events to go there instead of the script that is applying the 3D effect.
This is easy to fix - just add pointer-events: none; to .imgtest. JSFiddle of the fix