Jump to content

Amadeus33

Member
  • Posts

    3
  • Joined

  • Last visited

Amadeus33's Achievements

Level 1

Level 1 (1/20)

0

Reputation

  1. 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>
  2. 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!
  3. 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!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.