How to have a clickthrough URL attached to custom CSS image

Site URL: http://julieyi.com

I wanted to add a hover effect to my images but I found the only way to do so was with a code block. However, I also need it to have a clickthrough URL but I'm not sure exactly how to do so. The top image (blue) is linked to the page I want the image to go to and the bottom one (indigo) is how I want the hover effect to appear.

This is the code in my code block right now.

<div class="image-swap">
  <img src="https://static1.squarespace.com/static/60447065cf5af74e6a6abd0f/t/60b95c39a44b106603815351/1622760507050/choreoblocks+icon1.png">
  <img src="https://static1.squarespace.com/static/60447065cf5af74e6a6abd0f/t/60b95c46e45ebd6d8126b2c7/1622760519575/choreoblocks+icon2.png">
</div>

(Additional question if anyone also happens to know but I'd like these images to also have rounded corners but the code I used doesn't apply to the code block. How I can do this as well?)

I'd appreciate any insight on this issue!

Hi. You can use Image Blocks to achieve this. See this guide.

@tuanphan I tried following the guide but the hover effect doesn't seem to work.

19 hours ago, WNFFL said:

@tuanphan I tried following the guide but the hover effect doesn't seem to work.

Which code did you add? Can you keep the code? We can check easier