Image Rollover Code Affecting Summary Block in Below Section

Site URL: https://www.avajohanna.com

Hi! 

I added in the following code to create an image rollover affect upon hover from color to black and white:

<a href="https://www.avajohanna.com/about">

  <img src="https://static1.squarespace.com/static/6052c034d86bb75777e2ba3b/t/607cb4c1f0c3115eec581af1/1618785482616/Meet+Ava.png"

onmouseover="this.src='https://static1.squarespace.com/static/6052c034d86bb75777e2ba3b/t/607cb4d6e4c76b75433adaee/1618785499642/Meet+Ava+B%26W.png'"

onmouseout="this.src='https://static1.squarespace.com/static/6052c034d86bb75777e2ba3b/t/607cb4c1f0c3115eec581af1/1618785482616/Meet+Ava.png'">

However, the HTML used in the code blocks are affecting how the Summary Section underneath it is appearing. Instead of showing all three summary blocks, it's only showing two. I know for certain that this code is affecting that section because when I remove it, the summary block below goes back to normal.

Please help!

Hi,

Could you please specify where this code is inserted on the website so that we can see the issue as it occurs. Where are these roll-over effects supposed to happen? On  the about page? Alternatively, you could also share a screenshot of the problem, that might help too.

Thanks,

Dan