Jump to content

Change image blend mode on hover (from multiply to normal)

Recommended Posts

I'd like to create an effect where gallery images have the 'multiply' blend mode, but when hovered over, the image reverts to normal, like this website:

https://www.cinziabruschini.com/

I'd rather not have to make multiple versions of the same image, overlay one and have it disappear - there must be a code alternative. In the above website, it seems like there's an effect over the whole page, which is then removed when a certain image is hovered over.

See video attached for example too.

Any help would be much appreciated, as I can't find the exact thing I'd like on the forums. TIA!

Link to comment
  • Replies 2
  • Views 511
  • Created
  • Last Reply

Top Posters In This Topic

Can you share your website URL and the gallery you want this effect on?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.