Adding hyperlink to image swap code block

Hi,

2 options

Option 1. Use this guide to create image hover effect. You can achieve click easier.

Option 2. Edit code to this then let me know. I will give some CSS to enable clickable. Replace beaverhero with new url.

<div class="image-swap">
  <a href="https://beaverhero.com"></a>
  <img src="https://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpg">
  <img src="https://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpg">
</div>

Hi! So I tried the option 1 but I can't seem to get the second image to appear?

I'd like to give the second option a go as I think this makes more sense.

My issues NOW is that whatever code block is last on that page - anything underneath that code block takes that html property...

Might you know how to fix?

On 3/10/2021 at 12:36 AM, emrod said:

Hi! So I tried the option 1 but I can't seem to get the second image to appear?

I'd like to give the second option a go as I think this makes more sense.

My issues NOW is that whatever code block is last on that page - anything underneath that code block takes that html property...

Might you know how to fix?

Hi. Edit code to this

<div class="image-swap">
  <a href="https://beaverhero.com"></a>
  <img src="https://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c90c7c1e447d7b159a1/1614621840788/G1blk.jpg">
  <img src="https://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpghttps://static1.squarespace.com/static/5f6d95d8648c493bc6755ec7/t/603d2c979295ad0aaf8025a3/1614621847571/G1ora.jpg">
</div>
<style>
  div.image-swap {position: relative;}
  div.image-swap a {
  	position: absolute;
    top:0
      left: 0;
    width: 100%;
    height: 100%;
  	}
</style>