Jump to content

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

Recommended Posts

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;
}

1567426549_ScreenShot2021-02-12at17_03_16.thumb.png.0dd6c249a5641f37953372284b764c64.png

 

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

2112997605_ScreenShot2021-02-12at17_03_27.thumb.png.130e9155d6ee209baee5049cfd344875.png

 

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!

1802304283_ScreenShot2021-02-12at17_27_01.thumb.png.619b2f0d8852f103fa666227fbe2a3b3.png

 

Please let me know if you can help!

If you need my site info, let me know!

 

Thanks!

  

Link to comment
  • Replies 2
  • Views 311
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.