Hover on image to add overlay in JavaScript

Question

If I have more than one image in a div wrapper. I want to add overlay on image when user hover over the image. I am trying to do using code shown below.

for(var i=0; i<document.getElementsByTagName('img').length; i++) {
document.getElementsByTagName('img')[i].addEventListener('mouseover', function(event){
    
    let elementExists = document.getElementById('wrapper'); 
    let Center = document.createElement('div');
    let Text = document.createElement('div');
     
    if (!elementExists) {
      let Wrapper = document.createElement('div');
      let parentElement = event.currentTarget.parentElement;
      Wrapper.classList.add('Wrapper');
      Wrapper.id = 'wrapper';
      
     Center.classList.add('Center');
     Text.innerHTML = "Sample text";
      
     parentElement.appendChild(Wrapper);
     Wrapper.appendChild(Center);
     Center.appendChild(Text);
    
      Wrapper.addEventListener('mouseout', function(event){
        if (document.getElementById('wrapper')) {
            document.getElementById('wrapper').remove();
        }
      });
    }
});
}

.col-md-6 {
        width: 375px;
        height: 211px;
        margin: 20px;
        position: relative;
    }
    
        .Wrapper {
        display: table;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100% !important;
        width: 100%;
        text-align: center;
        z-index: 1000;
        font-family: arial;
        color: #fff;
        top: 0;
    }

    .Center {
        display: table-cell;
        vertical-align: middle;
    }

<div class="col-md-6">
<a href="#">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</a>
<a href="#">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</a>
</div>

Every time I hover on first image, code just works fine. But when I hover on 2nd image it adds overlay on 1st image only.(It should add overlay on second image) I tried to debug the code and let parentElement = event.currentTarget.parentElement; is showing the a href only.

NOTE: I came to know its because I am giving position: absolute to Wrapper. I only want to make changes in JavaScript file and at max to css. Please let me know if you found error in the code.

it looks like your absolute positioning in CSS is the cause, the Wrapper stays exactly where you have placed it. Btw, a quick way to optimize your current for loop would be to extract the document.getElementsByTagName outside of the loop and keep it as a local variable, no need to query them on every iteration of the loop and inside the loop again — Icepickle
– Icepickle, Commented Nov 28, 2017 at 8:13
@Icepickle This is just a sample code that I have made. I am iterating images in much different way in actual code. Thank! Can you please tell me fix, how can I change CSS to fix it? — Tavish Aggarwal
– Tavish Aggarwal, Commented Nov 28, 2017 at 8:17
You can do it with simple CSS as well codepen.io/ArnaudBalland/pen/vGZKLr — Mohhamad Hasham
– Mohhamad Hasham, Commented Nov 28, 2017 at 8:17

FcoRodr · Accepted Answer · 2017-11-28 09:10:47Z

It's simply a css problem. Just add this to what you currently have:

a {
  position: relative;
  display: inline-block;
}

.Wrapper {
    display: inline-block;
    left: 0;
}

.Center {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    height: 100%;
}

Also I removed the final Text div and added its text to the Center div, as it triggered the mouseout event and made it flicker.

for(var i=0; i<document.getElementsByTagName('img').length; i++) {
document.getElementsByTagName('img')[i].addEventListener('mouseover', function(event){
    
    let elementExists = document.getElementById('wrapper'); 
    let Center = document.createElement('div');
     
    if (!elementExists) {
      let Wrapper = document.createElement('div');
      let parentElement = event.currentTarget.parentElement;
      Wrapper.classList.add('Wrapper');
      Wrapper.id = 'wrapper';
      
     Center.classList.add('Center');
     Center.innerHTML = "Sample text";
      
     parentElement.appendChild(Wrapper);
     Wrapper.appendChild(Center);
    
      Wrapper.addEventListener('mouseout', function(event){
        if (document.getElementById('wrapper')) {
            document.getElementById('wrapper').remove();
        }
      });
    }
});
}

.col-md-6 {
  width: 375px;
  height: 211px;
  margin: 20px;
  position: relative;
}

a {
  position: relative;
  display: inline-block;
}


.Wrapper {
  display: inline-block;
  left: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100% !important;
  width: 100%;
  text-align: center;
  z-index: 1000;
  font-family: arial;
  color: #fff;
  top: 0;
}

.Center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
}

<div class="col-md-6">
<a href="#">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</a>
<a href="#">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</a>
</div>

Collectives™ on Stack Overflow

Hover on image to add overlay in JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related