mouse hover effects on image map

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>

Please provide a password