2nd image appears on hover + gets Redirected to another page if clicked

Hello, I hope everyone is doing well. Guys, please help me with the code to have second image appear smoothly when I hover my mouse on the main picture - and if I click on that picture, I would like for it to get redirected to another page if possible. If possible, I would like the page to refresh and not opened on another browser.

Here is the link:

https://ptphotography.squarespace.com/projects-with-logo

Thank you in advance.

Kind regards,
K

Edit: I have added the images in image block and added link in it.. 

You want:

• Click Main image > the browser will open new site in same page
• Hover main image > 2rd image will show?

@tuanphan Thank you for your reply. When I hover over main image, I want a second image to show. And if I click on the image, it gets redirected to a link.  Please help me with the code. 

Stay safe,
K

This should help:

https://www.tiffany-davidson.com/blog/squarespace-change-image-on-hover with click thru url. 

@derricksrandomviews After two weeks of waiting, finally got a functional code! This is wonderful. I didn't know it was that simple! I am so grateful for your assistance and patience. 

Stay safe,
K

For anyone, you can use Image Blocks (add link) then use this code to make image change on hover.

thanks @tuanphan 

Suppose we write your code:

Image Block allow you to add link. You can check again.

But of course, how can I forget that 😆 Bless you!

Have you solved it yet?

Sorry @tuanphan I have not figured it out yet. Please help!

22 minutes ago, tuanphan said:

Have you solved it yet?

This was my question I case it gets confusing:

On 1/3/2021 at 3:07 PM, Ptphotography said:

thanks @tuanphan 

Suppose we write your code:

/* hide image on hover */

div#block-yui_3_17_2_1_1577707091631_3805 a:hover img {

opacity: 0;

 

}

div#block-yui_3_17_2_1_1577707091631_3805 a img {

transition: all ease-in-out 0.9s;

opacity: 1;

}

/* Set new image */

div#block-yui_3_17_2_1_1577707091631_3805 a {

background-image: url(https://cylinder-mackerel-pnk5.squarespace.com/s/img1.jpg);

background-size: cover;

display: block;

}

 

Where/How do we rewrite your code in order to get redirected to another page if the image/images is clicked? This is where I am struggling. Basically what we need is a code for a second image to appear on hover and if the image is clicked, it gets redirected to another site/page.

 

Thanks!

 

 

Kind regards,
K

On 1/3/2021 at 6:28 PM, tuanphan said:

Image Block allow you to add link. You can check again.

Have you checked this yet?

41 minutes ago, tuanphan said:

Have you checked this yet?

Yes sir!

URL doesn't exist.

https://ptphotography.squarespace.com/projects-with-logo