Full screen gif appears when hovering hyperlinks

Hi all!

I've had luck with the wonderful Squarespace community before and hope that someone can help me with some custom code. 

My homepage has a paragraph with text and a few hyperlinks. I've created unique gifs/videos for each of those pages and I'm trying to inject some code so that they appear behind the paragraph whenever I hover over one of the hyperlinks. 

Is there someone on here that can help me make that happen? 

Best,

Sofia.

Oh and I also asked chat GPT for help, but I've never worked with java script and I can't seem to make it work. 

Maybe one of you people can?

/* CSS */

/* Styles for the GIF container */
.gif-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
}

/* Style for the GIF */
.gif-container img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Hover effect on the "coffee" hyperlink */
a:hover {
  /* You can customize this property to display the GIF container */
  display: block;
}



/* JavaScript */

// JavaScript to toggle the GIF container display
document.addEventListener('DOMContentLoaded', function() {
  const coffeeLink = document.querySelector('a[href="https://www.sofiawiklander.com/thelastcoffeeever"]');
  const gifContainer = document.querySelector('.gif-container');
  
  coffeeLink.addEventListener('mouseover', function() {
    gifContainer.style.display = 'block';
  });

  coffeeLink.addEventListener('mouseout', function() {
    gifContainer.style.display = 'none';
  });
});



/* HTML */

<div class="gif-container">
  <img src="<iframe src="https://giphy.com/embed/11xVhnKOKtAj5e" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/sad-emoji-11xVhnKOKtAj5e">via GIPHY</a></p>" alt="Full-Screen GIF">
</div>

How have you tried applying this code? You have styles, scripts and HTML together, but they do need treating separately. The CSS Styles need to be contained in <style></style> tags and the javascript needs to be contained in <script></script> tags.

So do I wrap each block with those containers? 

There seem to be a couple of places to paste custom code on Squarespace. 

1.  Design > Custom CSS (I already have some custom CSS here)
2.  Settings > Developer Tools > Code Injection > header/footer/lock page
3.  Individual Page Settings > Advanced > Page Header Code Injection

 Should I paste it all under (1) or separate the different CSS, Java and HTML code blocks into different places on Squarespace (1), (2) and/or (3)?

Depending on how your code is designed, you can try it all in a code block on the page like this:

/* CSS */

<style>
  
/* Styles for the GIF container */
.gif-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
}

/* Style for the GIF */
.gif-container img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

/* Hover effect on the "coffee" hyperlink */
a:hover {
  /* You can customize this property to display the GIF container */
  display: block;
}

</style>

<script>

/* JavaScript */

// JavaScript to toggle the GIF container display
document.addEventListener('DOMContentLoaded', function() {
  const coffeeLink = document.querySelector('a[href="https://www.sofiawiklander.com/thelastcoffeeever"]');
  const gifContainer = document.querySelector('.gif-container');
  
  coffeeLink.addEventListener('mouseover', function() {
    gifContainer.style.display = 'block';
  });

  coffeeLink.addEventListener('mouseout', function() {
    gifContainer.style.display = 'none';
  });
});

</script>


/* HTML */

<div class="gif-container">
  <img src="<iframe src="https://giphy.com/embed/11xVhnKOKtAj5e" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/sad-emoji-11xVhnKOKtAj5e">via GIPHY</a></p>" alt="Full-Screen GIF">
</div>

You may need to put the script in header code injection, and the style in Custom CSS and the HTML on the page in a code block. But see what works.

Can you share your website URL and the page this is on?

Thank you so much Ziggy, I'm gonna try this right away!

https://www.sofiawiklander.com/ on the homepage. The links I want gifs for are "Coffee" "Quilted Northern" "Mini" and "Cricket"