Site URL: https://rectangle-rhombus-8f5s.squarespace.com/hop-varieties
Hello, I am trying to have an image rollover swap and have used this code from an online tutorial, but it doesn't seem to line up (look at link in incognito mode if you aren't seeing the overlap).
Here is the custom CSS I am using:
/*image swap*/
.image-swap img:nth-child(1){position:absolute; transition:1s;}
.image-swap img:nth-child(1):hover{opacity:0;}
/*end image swap*/
then I am using inline code on the page as so:
<div class="image-swap">
<img src="https://static1.squarespace.com/static/6064ac7b6aa1f0353a050a95/t/62825f8dfcc256051b01506c/1652711309494/Hop_variety_cascade_A.png
">
<img src="https://static1.squarespace.com/static/6064ac7b6aa1f0353a050a95/t/62825f9f70b48c1c01eace02/1652711327416/Hop_variety_cascade_B.png">
</div>