Jump to content

mouse hover effects on image map

Recommended Posts

Site URL: https://gregory-ain.squarespace.com

hi squarespace experts!  

as a non-coder i'm looking for an assist on a page i've created using the york template.  

i've got a responsive image map working very nicely as a code block on the page, but would like to add some hover effects on mouse over and on mouse out (not the technical terms, i know).  ideally the on mouse over would unblur the specific portions of the image that are hot spots.  i do have the unblurred portions of the image saved as separate files.  

this is the code i'm currently using.  although the image map has six different hot spots, i've included just a portion of the code (for one hot spot) to simplify things for anyone that might be able to help.

any advice is greatly appreciated!

<img src="https://static1.squarespace.com/static/5f861b8ef918960d6454dea6/t/5f974d123a11f76bae215959/1603751187099/1_%C2%A9MAP_MoMAnoimage.jpeg" usemap="#image_map">

<map name="image_map">

<a href="https://gregory-ain.squarespace.com/gregory-ain" title="Gregory Ain" style="position: absolute; left: 0.46%; top: 5.08%; width: 22.49%; height: 15.89%; z-index: Gregory Ain;"></a>

Link to comment
  • Replies 1
  • Views 1.1k
  • Created
  • Last Reply

Please provide a password

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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


This topic is now archived and is closed to further replies.

  • 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.