Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Ptphotography

Question

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 post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@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,

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

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

Posted Images

13 answers to this question

Recommended Posts

  • 0

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 post
  • 0

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 post

Create an account or sign in to comment

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


×
×
  • Create New...