Navigation between pages not linking (Url error) and Hover effect top image larger once published

Site URL: https://www.metre-squared.com/

In the preview container, my hover effect images are perfectly proportionate in a grid formation. As shown below.

CODE BLOCK BELOW

<div class="image-swap">

  <img src="https://static1.squarespace.com/static/5f117cd96138e1478ae40d2d/t/602435f190fd9b4e9fea9622/1612985854605/About+1.jpg">

  <img src="

https://static1.squarespace.com/static/5f117cd96138e1478ae40d2d/t/60243612078acb4eda76cd94/1612985887507/About+7.jpg">

</div>

  CUSTOM CSS BELOW

.image-swap img:nth-child(1) {
  position:absolute;
    transition:1s;
}

.image-swap img:nth-child(1):hover {    
  opacity:0;
}

Once published live, the top hover image expands and then shrinks to the second image. (Image 2)

Im not sure why this is happening, as it should effect both images, but only effects the first image.

Please can somebody help! I have tried everything!

The second issue is that i have added a hyperlink code to the image to navigate around the site.

LINK CODE

<a href=“https://metre-squared.squarespace.com/about“>

<div class="image-swap">

  <img src="https://static1.squarespace.com/static/5f117cd96138e1478ae40d2d/t/602435f190fd9b4e9fea9622/1612985854605/About+1.jpg">

  <img src="

https://static1.squarespace.com/static/5f117cd96138e1478ae40d2d/t/60243612078acb4eda76cd94/1612985887507/About+7.jpg">

</div>

     </a>

This link doesn't navigate to my desired page and comes up with an error message!

Please let me know if you can help!

If you need my site info, let me know!

Thanks!

The proportions and aspect ratio are fine when I look at the site. Clicking on the about image took me directly to that page as well.  Nice site by the way. 

Ditto on derricksrandomviews report. All worked and looked good.