Trying to use hover on a element below an absolute positioned element - html

Question

So I'm trying to use a hover effect on two elements. One of the elements has a absolute position, this element needs to have the background recolored once hovered. This seems to work, however I cannot get the back image to scale accordingly. I think it has to do with the absolute positioning of the first div. But I cannot find a way to fix this. I have been trying to fix it using pointer-event but I cannot get that to do the trick.
<style>
.master {
width: 1200px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
}
img:hover {
transform: scale(1.2)
}
.hover {
position: absolute;
height: 100%;
width: 100%;
}
.hover:hover {
background: rgba(255, 0, 0, 0.5);
}
</style>
<div class="master">
<div class="hover">
</div>
<img src="http://via.placeholder.com/1200x350" alt="">
</div>
This is the code I have got right now

Answer 1

You can't get hover effects on two stacked elements at once. However, if you want to be able to hover the element which is behind another element, you can use pointer-events: none; on the element in the foreground, allowing mouse actions to "go through it" and therefore affect the element in the back:
<style>
.master {
width: 1200px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
}
img:hover {
transform: scale(1.2)
}
.hover {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
}
.hover:hover {
background: rgba(255, 0, 0, 0.5);
}
</style>
<div class="master">
<div class="hover">
</div>
<img src="http://via.placeholder.com/1200x350" alt="">
</div>

Answer 2

You can add pointers-event: none; to img and your pointer will ignore the image but that's only in case you don't have any plan to add some mouse actions on image later

Answer 3

You're correct that you're not getting the hover event on the image because the absolutely positioned <div> is covering it. But since the <img> element immediately follows the <div> element in your HTML hierarchy, you can use the Adjacent Sibling Combinator to target it.
<style>
.master {
width: 1200px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
}
.hover {
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
.hover:hover {
background: rgba(255, 0, 0, 0.5);
}
.hover:hover + img {
transform: scale(1.2)
}
</style>
<div class="master">
<div class="hover">
</div>
<img src="http://via.placeholder.com/1200x350" alt="">
</div>

Answer 4

I have found out that moving the hover effect to .master instead of the seperate elements seem to work.
<style>
.master {
width: 1200px;
overflow: hidden;
position: relative;
}
img {
width: 100%;
z-index: 50;
}
.master:hover img{
transform: scale(1.2)
}
.hover {
position: absolute;
height: 100%;
width: 100%;
opacity: 0.8;
z-index: 100;
}
.master:hover .hover {
background: rgba(255,0,0, 0.5);
}
</style>
<div class="master">
<div class="hover">
test
</div>
<img src="http://via.placeholder.com/1200x350" alt="">
</div>

Answer 5

There is no problem between hover and absolut position.
Your problem is that img tag is place on top on .hover cause of the absolute position.
So your hover div is behind your image and the mouse over is intercepted by image tag.
Hope it's help

Answer 6

You need to set the :hover to an absolute element with class .hover:
.hover:hover + img {
transform: scale(1.2);
}
Also, set z-index for the same class without a :hover.
In addition, I've added transition for transform and background.
.master {
width: 1200px;
overflow: hidden;
position: relative;
display: inline-flex;
}
.hover {
position: absolute;
height: 100%;
width: 100%;
z-index: 9999;
transition: background .5s;
}
img {
width: 100%;
transition: transform .5s;
}
.hover:hover + img {
transform: scale(1.2);
}
.hover:hover {
background: rgba(255, 0, 0, 0.5);
}
<div class="master">
<div class="hover"></div>
<img src="http://via.placeholder.com/1200x350" alt="">
</div>