Jump to content

Full screen gif appears when hovering hyperlinks

Recommended Posts

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.

Screenshot 2023-05-30 at 17.58.47.png

Link to comment
  • Replies 6
  • Views 453
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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>

 

 

 

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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)?

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.