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

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

Johannes · Accepted Answer · 2021-01-30 17:14:26Z

4

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>

answered Jan 30, 2021 at 17:14

Johannes

67.9k22 gold badges84 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Klak031 · Accepted Answer · 2021-01-30 18:42:50Z

3

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

answered Jan 30, 2021 at 18:42

Klak031

498 bronze badges

Comments

Mickael · Accepted Answer · 2021-01-30 17:14:40Z

1

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>

answered Jan 30, 2021 at 17:14

Mickael

1051 silver badge7 bronze badges

3 Comments

s.kuznetsov Over a year ago

Look at my solution, please. Do you need such a result?

Mickael Over a year ago

@s.kuznetsov Almost, I didn't mention this in my opening post. but I want the contents of .hover not to scale up with the background image. Your code scales that up too. But apart from that it works just like I want.

s.kuznetsov Over a year ago

I just fixed this and updated my answer. You need to add display: inline-flex to .master. Check, pls.

skyline3000 · Accepted Answer · 2021-01-30 17:07:59Z

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>

Sébastien Montreal · Accepted Answer · 2021-01-30 17:15:32Z

0

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

answered Jan 30, 2021 at 17:15

Sébastien Montreal

11 bronze badge

Comments

s.kuznetsov · Accepted Answer · 2021-01-30 18:37:56Z

0

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>

edited Jan 30, 2021 at 18:37

answered Jan 30, 2021 at 17:20

s.kuznetsov

15.3k3 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related