Jump to content

Hover Effect - When hover an block change the image source of another block

Recommended Posts

Site URL: https://amandakuang.com/

Hello👋, I am wondering if there is a way to switch the image source of block A according to the hover action on block B. 

Basically I'm trying to make block A show some information (in the form of image) about block B when user hovers over B, and make A return to the original state (cover image) when nothing is hovered.


My intuition is this but it's not working:

(block B) :hover
  (block A) img {src= "source.png";}


I've attached a screenshot of the website I'm working on. Image A is the yellow block, and image B is one of the grey blocks.2026525020_2021-01-2611_20_57.thumb.png.472e8b72c2b78736e1d2d764153c7c21.png


Thank you!

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.