Jump to content

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

Recommended Posts

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.1059911931_Screenshot2020-12-22at10_09_50AM.thumb.png.2f33263be464902464c2687707e3b14f.png

 

Link to comment
  • Replies 13
  • Views 794
  • Created
  • Last Reply

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!
 
 
Link to comment

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

Link to comment

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.