Amadeus33

Hey, 

I just cant figure out what the problem is. I am trying to show an image after I hover a text. The image should follow the mouse and should be centered. Z-Index isnt working or its not showing up when its value is -1. 

Here are all the codes. Would be great if someone could help. Thanks a lot!

Site: https://swan-frog-cepd.squarespace.com/

Pass: bnn2022

CSS:

#container {
  position: relative;
}
.followMouse {
  z-index: 0;
  position: absolute;
}

HTML:

<div id="container">
  <a href="" data-src="https://static1.squarespace.com/static/5f6c5e26dc4b6338ce9bcba6/t/622f06150ab78218bb811425/1647248921305/German_Facts_02.png" class="hover">
    <h1>New</h1>
  </a>
</div>

JavaScript:

<script>
for (let el of document.querySelectorAll('.hover')) {
  let image = new Image();
  image.src = el.dataset.src;
  image.className = "followMouse";
  el.addEventListener('mouseover',(e)=>{
    document.getElementById('container').append(image);
    image.style.left = `${e.x - (image.width/1)}px`;
    image.style.top = `${e.y - (image.height/1)}px`;
  })
  el.addEventListener('mouseout',(e)=>{
    image.remove();
  })
}
window.addEventListener('mousemove',(e)=> {
  let image = document.querySelector('.followMouse');
  if (image) {
    image.style.left = `${e.x - (image.width/1)}px`;
    image.style.top = `${e.y - (image.height/1)}px`;
  }
})
</script>

Hey,

due to nda I can't share the real site but this should work aswell:

https://papaya-opossum-l2aa.squarespace.com/

Pass: accordion

Many thanks!

Hey,

is there any possibilty to show an image after hovering over the accordion text/headline?

I want to have the follow mouse effect that is shown on the portfolio-site when you hover over the text-links. 

I am just a noob in css and couldnt find any proper explanation. 

Thanks!