Jump to content

How to use hover over gifs for my Vimeo video thumbnails

Go to solution Solved by tuanphan,

Recommended Posts

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 by JGreen
New link added
Link to comment

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

image.thumb.png.719569cef7342c75e2dbfc8d2bbea44e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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)
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Screenshot2024-02-26at12_52_23.png.74858fa9c17ea55069dafdf3c90c4843.png

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!

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

Screenshot2024-02-26at12_52_23.png.74858fa9c17ea55069dafdf3c90c4843.png

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

image.thumb.png.ec1278f1b7e74aabb610781316496e1a.png

but main page has no this

image.png.0e371ac9eb2501a8f8737c11af28a2ce.png

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

image.png.9fc5acc741a714f3f2454442b87c3496.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.