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

 

Edited by Ptphotography
Link to comment

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
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?

click.png.93fd1573976de3b3cbfd8925130616d8.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.