Adding hyperlink to image swap code block

Site URL: https://deer-lizard-lrrj.squarespace.com/

Hi so I have a code block on this site that contains this code:

<div class="image-swap">
  <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>

So that when I hover the image changes colour to mimic a live hyperlink.

I now want to be able to also click on this image and follow a link to another website. What code do I need?

Currently it's html.

Thanks.

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>

Hello!
I just have solved the same issue.
The code goes as follows:

<a href="http://google.com">
<div>
<div class="image-swap">
<img src="Image Link">
<img src="Image Link">
</div>
</a>

On 3/6/2021 at 7:32 AM, tuanphan said:

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>

 

Hello! I'd like to get option 1 working, it worked on image for a second and then it didn't work again. Could you help me check (link here) and see what I did wrong? Thank you!

On 1/7/2023 at 2:45 AM, SSong said:

Hello! I'd like to get option 1 working, it worked on image for a second and then it didn't work again. Could you help me check (link here) and see what I did wrong? Thank you!

I remember I answered this, you have some tag missing. Can you check it again?