Question 371192 in Html Question posted in
Some basic documentation can be found here.

Html – How to let mouse hover effect apply to two overlayed images?

I have two images in the same div, one over another. I want the mouse hover effect to apply to both images when I move mouse over the image, and the background image will display to have the zoom effect. But I found only the one on the top will react to the hover. Is there anyway to let both images change simultaneously?

<div class="overlay transparent" onmousemove="zoom(event)"
  style="background-image: url(https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg)">
  <img src="https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg" />
  <img src="https://media.nomadicmatt.com/2023/tropicalislandsfeature.jpg" />
</div>

<style>
  div.transparent {
    height: 150px;
    width: 250px;
    overflow: hidden;
    cursor: zoom-in;
  }

  div.transparent img:hover {
    opacity: 0;
  }

  div.transparent img {
    transition: opacity 0.5s;
    display: block;
    width: 100%;
  }

  div.overlay {
    position: relative;
    display: inline-block;
  }

  div.overlay img:nth-child(1) {
    position: relative;
    object-fit: contain;
    z-index: 1;
  }

  div.overlay img:nth-child(2) {
    position: absolute;
    object-fit: contain;
    top: 0;
    left: 0;
    z-index: 2;
  }
</style>

<script>
 function zoom(e) {
            var zoomer = e.currentTarget;
            e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
            e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
            x = offsetX / zoomer.offsetWidth * 100
            y = offsetY / zoomer.offsetHeight * 100
            zoomer.style.backgroundPosition = x + '% ' + y + '%';
        }
</script>
Tags:

2

Answers


  1. 0

    You can use the :has pseudo-class.

    Edit : For this case you can use only :hover pseudo-class

    <div class="overlay transparent" style="background-image: url(https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg)">
  <img src="https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg" />
  <img src="https://media.nomadicmatt.com/2023/tropicalislandsfeature.jpg" />
</div>

<style>
  div.transparent {
    height: 150px;
    width: 250px;
    overflow: hidden;
  }
  
  /*  div.transparent:has(img:hover) img{*/
  div.transparent:hover img{
    opacity: 0;
  }
  
  div.transparent img {
    display: block;
    width: 100%;
    transition: opacity 0.5s;
  }
  
  div.overlay {
    position: relative;
    display: inline-block;
  }
  
  div.overlay img:nth-child(1) {
    position: relative;
    object-fit: contain;
    z-index: 1;
  }
  
  div.overlay img:nth-child(2) {
    position: absolute;
    object-fit: contain;
    top: 0;
    left: 0;
    z-index: 2;
  }
</style>
    Login or Signup to reply.
  2. 0

    so here’s the thing, hover effects occur when u hover on an element and i can see that you put the :hover pseudo class on the element. since u stacked one img element against the other, your mouse recognises the element on the top(with a greater z-index) once you hover on it leaving the one behind unaffected. if u want to achieve a result where both the images to get affected by the hover effect in this case, consider adding the :hover pseudo to the parent div then effecting the change on hover on the images

     

 <div class="overlay transparent">
   <img src="https://i.pinimg.com/originals/2b/de/de/2bdede0647e3cdf75b44ea33723201d9.jpg" />
          <img src="https://media.nomadicmatt.com/2023/tropicalislandsfeature.jpg" />
 </div>
    
        <style>
          div.transparent {
            height: 150px;
            width: 250px;
            overflow: hidden;
            background-color:red;
          }
    
          div.transparent:hover{
    img {
            opacity: 0;
          }
    } 
    
          div.transparent img {
            transition: opacity 0.5s;
            display: block;
            width: 100%;
          }
    
          div.overlay {
            position: relative;
            display: inline-block;
          }
    
          div.overlay img:nth-child(1) {
            position: relative;
            object-fit: contain;
            z-index: 1;
          }
    
          div.overlay img:nth-child(2) {
            position: absolute;
            object-fit: contain;
            top: 0;
            left: 0;
            z-index: 2;
          }
        </style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search