Second image on hover for Squarespace 7.1

Site URL: https://www.artisaneyeworks.com/dr-kimberly-hoyt

I want to have a second image revealed on hover, and found the code below to make this happen. I've found that it does swap the images on hover, but the second image scales to a smaller size. I'd like it to fill the same foot print as the first image. Any suggestions?

<p>
<style>
img.normal {
  width: 90%;
}
</style>
  <div class="image-swap">
  <img class="normal" src="https://static1.squarespace.com/static/602c181598bd112424ba15a3/t/60789706cc385b4d98096b7e/1618515718253/dr_kimberly_hoyt_3x2.jpg">
  
  <img  class="normal" src="https://static1.squarespace.com/static/602c181598bd112424ba15a3/t/60789c9b6bfac2330ee3af5a/1618517148091/dr_kimberly_hoyt_3x2_02.jpg">
    
    </div>

</p>

Hi. Follow this guide to make imave change on hover.

Thanks! I'll give this a go 🙂

Tuanphan, I tried the steps outlined in the guide you recommended, and was not successful. Attached are screenshots of my steps. Please let me know if I made any mistakes or if you have any recommendations.

Thanks!

I just realized I didn't give you the URL for the page.

fetchpdx.squarespace.com/hover-effect

19 hours ago, mark6 said:

I just realized I didn't give you the URL for the page.

fetchpdx.squarespace.com/hover-effect

The image url doesn't exist. Can you check it again?

https://fetchpdx.com.squarespace/s/onigiri_02.png

Thanks for all your help! I realize where I made mistakes.

On 6/2/2021 at 12:08 PM, mark6 said:

Thanks for all your help! I realize where I made mistakes.

Do you need support with these?

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

1. (Mobile-Homepage) Reduce icon size?

2. (Tablet-Footer) Align 3 lines?

3. (Tablet/Mobile-Overlay Menu) Change logo color?

4. (Mobile-Our Staff) Move image to top of text?

5. (Tablet-Our Optometry Services) Increase width a bit?

6. (Tablet-Blog Posts) Increase width?