Hover effect on PNG image

April 26, 2022

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;
}