Gifs on hover?

Site URL: https://hoodzpahdesign.com/

Hello,

I am trying to create an effect similar to Hoodzpah Design's intro sentence, where you can hover over links and a gif pops up but goes away when you move the cursor.

I have done some searching but can't seem to find the right combination of css to make it happen.

Thanks!

Kate
katemelvin.com 

First, gotta say as a pro UX designer I'd heavily advise against this design. It's a usability nightmare ❤️ 

But if you're sure you can use this Custom CSS

//section[data-section-id="61d0cc9a2781d3429ac31abd"]{

a:before{
  display: block;
  z-index: 9;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-120%, -55%);
  content: '';
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 300px;
  height: 300px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
  background-size: contain!important;
  box-sizing: border-box;

}

a:hover{
  &:before{
    display:block;
  }
}

//set the background image based on link destination here
 a[href*="/whatever"]::before{
background: url(https://hoodzpahdesign.com/wp-content/uploads/2021/04/Bright.gif) center center no-repeat!important;
}

 a[href*="/somethingelse"]::before{
background: url(https://hoodzpahdesign.com/wp-content/uploads/2021/04/Bright.gif) center center no-repeat!important;
}

//}

Demo at https://caribou-wolf-8lbn.squarespace.com/ 
with password: "a"
 

Then:

- uncomment the first line (section ID)  and add the section ID you're using. Or block id. Remove the double slashes. Otherwise you'll add this to all links on your site.
- set the background url for each link depending on the link destination (href)

 

p.s. If you ever wanna to hire a Squarespace developer, feel free to hit me up 

Thank you SO much.

Can you go into why it's a usability nightmare?

Also @codeandtonic is there a way to make it not a link? And just apply it to plain text?

I added it to my homepage -- https://katemelvin.com if you want to take a look. Hover over Dodgers fan. I just want it to be an element of surprise if someone happens to hover over certain words.

I did change the code a little because it was hovering left and getting cut off. Not sure if I got lucky with the fixes or it's viable.

//section[data-section-id="61cf597b13214352fe345442"]{

  a:before{
  display: block;
  z-index: 9;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  content: '';
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 200px;
  height: 200px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
  background-size: contain!important;
  box-sizing: border-box;
  border-bottom:0px;

}

a:hover{
  &:before{
    display:block;
  }
}

13 hours ago, katemelvindesign said:

And just apply it to plain text?

 I'd  use the strikethrough style and use CSS to "unstyle" it.  – just because strikethrough is never really used for anything so it could just be our gif-tag.

like this

Modify the code below to only apply to H1 and/or the header -section by using section[data-section-id="61cf597b13214352fe345442"] 

span[style*="text-decoration:line-through"]{
text-decoration:none !important;
  &:before{
      display: block;
  z-index: 9;
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-100%, -55%);
  content: '';
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 300px;
  height: 300px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
  background-size: contain!important;
  box-sizing: border-box;
background: url(https://hoodzpahdesign.com/wp-content/uploads/2021/04/Bright.gif) center center no-repeat!important;

  }
}

span[style*="text-decoration:line-through"]:hover{
  &:before{
    display:block !important;
  }
}

Usability wise for this use case it's ok, I actually like it 🙂 If you were using it for links, it'd block the user from seeing the text, seeing the link text, would be a surprise but one that makes that part of the page unusable. Also might make it impossible to copy-paste etc. Things like these almost always end up causing some problems. After reading thousands of pages of UX research, you just develop an intuitive feel for things that are risky and likely to cause problems. But here...I'd keep it. You should test it with a few devices to make sure and possibly disable on mobile by using the 

html.no-touch {
//code here
}

to only apply this effect for non-touch screen devices (desktop which has mouse and can hover over stuff).

If the answer was "correct" you can mark it as one so others will find it. And feel free to hit me up if you ever need a SQSP pro for anything advanced 🙂

Amazing thank you so much @codeandtonic

@codeandtonic 

Hey!

All of this is so helpful, I'm trying to do the exact same thing as Kate but I'm having trouble finding the sectionID for some reason. I've attached screenshots, I would love to hear what you think I should do. 

I tried using the block id as you can see but I think I'm just missing something. I'm new to coding with Squarespace so any help is super appreciated! 

( Also here is a link to my site https://www.vidoun.com/indexhp it's very much being developed but I need the gifs to work before I can move forward)

Thank you so much!

Lucas 

On 1/3/2022 at 10:29 PM, LGVidoun said:

All of this is so helpful, I'm trying to do the exact same thing as Kate but I'm having trouble finding the sectionID for some reason

Your website is on Squarespace 7.0, not 7.1 That's why there are no section IDs. 

#block-61d1fa92732cbf5c467cb8cf should work though... There are no strikethroughs there at the moment. 

This is getting pretty specific. You may need to hire a Squarespace developer to create a tailored custom solution specifically for your site. 

PS. Nice site!
Make sure to adjust the line height to something like 1.3 or 1.4. Currently it's a bit too tight

This is all incredibly helpful! Thank you @codeandtonic!

Would anyone know how to fade the gif on/off?

Thanks again!

5 hours ago, johnsonmax said:

Would anyone know how to fade the gif on/off?

You could use opacity 0; normally and on hover add opacity:1 on the hover state. 

and have something like:

transition: opacity 0.3s linear;

Hey @codeandtonic! Love this feature. Thanks so much for sharing the code! Is there a way to disable the click-through link and just have the gif appear on hover? I don't want the user to be directed anywhere when they click the word/link.

On 8/16/2023 at 9:42 PM, Deborah-POD said:

Hey  Love this feature. Thanks so much for sharing the code! Is there a way to disable the click-through link and just have the gif appear on hover? I don't want the user to be directed anywhere when they click the word/link.

Which code did you use? We can tweak the code to disable click