How to use hover over gifs for my Vimeo video thumbnails

JGreen · February 17

Hello!

New to Squarespace and slightly new to coding, I need help!

I have a very new and basic website here: https://tan-leopard-gxas.squarespace.com/

As you'll see, I have Vimeo linked videos for my separate projects.

I would love to replace the static vimeo cdn thumbnails with animated gifs (which I've made), which would loop when the cursor hovers over each specific video/project.

Examples of what I'm after:
https://camillemarotte.com/

https://www.steptstudios.com/

https://bumblebee-reed-dhn7.squarespace.com/

Can anyone help me?

I've tried various forum posts on here, but can't seem to get any of the CSS code to work for me.

Thank you!
James

Edited February 17 by JGreen
New link added

tuanphan · February 18

Try this code to Website > Website Tools > Custom CSS (this code for first, second items)

a.lessons-image[href="/select-works/v/itv-comedy-greggs"] img {
    content: url(https://static1.squarespace.com/static/64382eed1c35456fd1ce5b34/t/645fbe335f7eac4fb5e681d1/1683996225403/Asus_Another_Level_01.gif);
}
a.lessons-image[href="/select-works/v/mtvcatfish"] img {
     content: url(https://static1.squarespace.com/static/64382eed1c35456fd1ce5b34/t/65b926225b27dc7fe8b06d07/1706632744209/Director_Reel_01.gif)
}

JGreen · February 18

Thanks so much @tuanphan! That works so nicely.

I wondered if there's any chance for these gifs to only animate when the cursor is hovered over them?

tuanphan · February 20

On 2/19/2024 at 12:21 AM, JGreen said:

Thanks so much @tuanphan! That works so nicely.

I wondered if there's any chance for these gifs to only animate when the cursor is hovered over them?

Change code to this new code

a.lessons-image[href="/select-works/v/itv-comedy-greggs"]:hover img {
    content: url(https://static1.squarespace.com/static/64382eed1c35456fd1ce5b34/t/645fbe335f7eac4fb5e681d1/1683996225403/Asus_Another_Level_01.gif);
}
a.lessons-image[href="/select-works/v/mtvcatfish"]:hover img {
     content: url(https://static1.squarespace.com/static/64382eed1c35456fd1ce5b34/t/65b926225b27dc7fe8b06d07/1706632744209/Director_Reel_01.gif)
}

JGreen · February 26

Thank you again @tuanphan!

I've decided to stick to the previous option, where the gifs animate on loop.

One last question, I think there's an issue in regards to the videos "categories".
It seems they only animate when viewed on the "All Videos" page (Named "Select Works").
See here: https://www.jamesgreenfilm.com/select-works

When I click on each individual video "category", the gifs thumbnails don't appear or play.
See here:
https://www.jamesgreenfilm.com/select-works/music-videos
https://www.jamesgreenfilm.com/select-works/commercials

Is there a line of code I can use to add and make this work across all categories?

Thank you so much for the help!

tuanphan · February 27

11 hours ago, JGreen said:

Thank you again @tuanphan!

I've decided to stick to the previous option, where the gifs animate on loop.

One last question, I think there's an issue in regards to the videos "categories".
It seems they only animate when viewed on the "All Videos" page (Named "Select Works").
See here: https://www.jamesgreenfilm.com/select-works

When I click on each individual video "category", the gifs thumbnails don't appear or play.
See here:
https://www.jamesgreenfilm.com/select-works/music-videos
https://www.jamesgreenfilm.com/select-works/commercials

Is there a line of code I can use to add and make this work across all categories?

Thank you so much for the help!

These pages

https://www.jamesgreenfilm.com/select-works/music-videos
https://www.jamesgreenfilm.com/select-works/commercials

contains "category" in url

but main page has no this

the code target no-category only, so it won't work on another page

you can add * symbol to the code, to make it target both formats

from this code

a.lessons-image[href="/select-works/v/victory-to-the-mimers"] img {
    content: url(https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExcjFwdWtvYXFoc2N2Mm94Zm05anl1N2doaDZnZjdnZzYxdDFuOHdmcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/4dCaqOBjqpmmmwWWqZ/giphy.gif)
}

a.lessons-image[href="/select-works/v/itv-comedy-greggs"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/02f63b02-d29f-44f0-b1a8-d27fe2429bf6/ezgif-4-2dc2db764b.gif?format=2500w)
}

a.lessons-image[href="/select-works/v/kid-kapichi-thugs"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/04f1695d-3ab1-4596-a1c8-fa029ea072bc/ezgif-4-ec4e8873d0.gif?format=2500w)
}

a.lessons-image[href="/select-works/v/kid-kapichi-death-dips"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/f982597b-edf6-4ca0-af66-c8f92320a0ac/ezgif-4-eb268ff6d1.gif?format=2500w)
}

a.lessons-image[href="/select-works/v/mtvcatfish"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/ee422cbe-ef0c-4909-a3f6-ab980607c7d6/ezgif-4-554f2aeeb6.gif?format=2500w)
}

a.lessons-image[href="/select-works/v/mtv-thecharlotteshow"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/75997f68-ea7c-4913-b1a5-7a2c181b0766/ezgif-4-73cab15d19.gif?format=2500w)
}

a.lessons-image[href="/select-works/v/notion-found-love"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/b6e98936-e5a0-4a9e-a78a-a6cf769e784a/ezgif-4-41b2c369a1.gif?format=2500w)
}

a.lessons-image[href="/select-works/v/crows-closer"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/55045bde-a3c2-46e0-9df9-6892ccd312ea/ezgif-1-32e33704b7.gif?format=2500w)
}

to this new code

a.lessons-image[href*="/select-works/v/victory-to-the-mimers"] img {
    content: url(https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExcjFwdWtvYXFoc2N2Mm94Zm05anl1N2doaDZnZjdnZzYxdDFuOHdmcSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/4dCaqOBjqpmmmwWWqZ/giphy.gif)
}

a.lessons-image[href*="/select-works/v/itv-comedy-greggs"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/02f63b02-d29f-44f0-b1a8-d27fe2429bf6/ezgif-4-2dc2db764b.gif?format=2500w)
}

a.lessons-image[href*="/select-works/v/kid-kapichi-thugs"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/04f1695d-3ab1-4596-a1c8-fa029ea072bc/ezgif-4-ec4e8873d0.gif?format=2500w)
}

a.lessons-image[href*="/select-works/v/kid-kapichi-death-dips"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/f982597b-edf6-4ca0-af66-c8f92320a0ac/ezgif-4-eb268ff6d1.gif?format=2500w)
}

a.lessons-image[href*="/select-works/v/mtvcatfish"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/ee422cbe-ef0c-4909-a3f6-ab980607c7d6/ezgif-4-554f2aeeb6.gif?format=2500w)
}

a.lessons-image[href*="/select-works/v/mtv-thecharlotteshow"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/75997f68-ea7c-4913-b1a5-7a2c181b0766/ezgif-4-73cab15d19.gif?format=2500w)
}

a.lessons-image[href*="/select-works/v/notion-found-love"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/b6e98936-e5a0-4a9e-a78a-a6cf769e784a/ezgif-4-41b2c369a1.gif?format=2500w)
}

a.lessons-image[href*="/select-works/v/crows-closer"] img {
    content: url(https://images.squarespace-cdn.com/content/v1/65d0abf4107d7d1115f5f8ff/55045bde-a3c2-46e0-9df9-6892ccd312ea/ezgif-1-32e33704b7.gif?format=2500w)
}

JGreen · February 29

Thanks so much @tuanphan! I'm so happy with my site now 🙂

abstract88 · July 17

Hey-

I'd love to do this too but i don't understand where to upload the GIFS?

https://mindallyouroutsides.com/editor

Thanks,
Dan

tuanphan · July 19

On 7/18/2024 at 5:01 AM, abstract88 said:

Hey-

I'd love to do this too but i don't understand where to upload the GIFS?

https://mindallyouroutsides.com/editor

Thanks,
Dan

You can follow these simple steps to get an image/gif url

First, add a Section and choose Image Section

Next, click Edit Gallery

Upload your gifs file

Save. Preview the page. Right click on image gif > Copy Image Address URL

abstract88 · August 14

Thanks for that!

I'm not understanding what "a.lessons" is referring to in your example above. How would this apply to my site?

www.mindallyouroutsides.com

Thanks!

tuanphan · August 15

6 hours ago, abstract88 said:

Thanks for that!

I'm not understanding what "a.lessons" is referring to in your example above. How would this apply to my site?

www.mindallyouroutsides.com

Thanks!

Don't change alessons, change item url only

abstract88 · August 15

And I'm grabbing that from the current thumbnail on the video?

tuanphan · August 17

On 8/15/2024 at 10:27 PM, abstract88 said:

And I'm grabbing that from the current thumbnail on the video?

It is item url, just click on it >> you will see url in browser address bar

How to use hover over gifs for my Vimeo video thumbnails

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

JGreen

abstract88

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources