Jump to content

Gif hover on portfolio item collection - squarespace 7.1 Mark Novo Template

Recommended Posts

Please provide password, the gif maybe injected via custom code

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 2 months later...
  • 2 years later...
On 2/27/2023 at 10:30 PM, tierneyc said:

I was also hoping to achieve this effect!

If you share link to portfolio on your site, we can give CSS code to achieve this

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...
On 7/14/2023 at 12:22 PM, SofiaHoughton said:

Hi, I also want to use gifs as feature image of my portfolio pages, how do I do it?

You mean always use gifs or change static to gif on hover? If on hover, you can share link to portfolio page, we can help easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 2 weeks later...
On 7/26/2023 at 4:22 PM, SofiaHoughton said:

I would like to use gifs on hover for the feature image of my Work grid
this is the site I'm working on
https://sofiahoughton.com/
password: banana

Use this CSS code, change to your image gif urls

a.grid-item[href="/work/muralvidkit"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/07/20/04/45/leva-8138344_1280.jpg);
}
a.grid-item[href="/work/muralelevate"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/07/25/19/47/milky-way-8149815_1280.jpg);
}
a.grid-item[href="/work/muralproduct"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/03/31/14/44/nature-7890194_1280.jpg);
}
a.grid-item[href="/work/origin"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/07/30/00/12/cat-8157889_1280.png);
}
a.grid-item[href="/work/decoded-aflt9"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/07/20/04/45/leva-8138344_1280.jpg);
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.