Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

Gifs on hover?


Question

9 answers to this question

Recommended Posts

  • 3

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"
 

1559261512_GoogleChromeat00_34.gif.4f1ae86d4d2383dcc7714f725b8ab9b7.gif

 

 

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 

Edited by codeandtonic
gif

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 1
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;

 

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 0

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;
  }
}

 

Link to comment
  • 0
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 🙂

Edited by codeandtonic

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 0

@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 

 

Screen Shot 2022-01-03 at 3.22.55 PM.png

Screen Shot 2022-01-03 at 3.25.04 PM.png

Link to comment
  • 0
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

 

 

 

 

 

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

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