I'm hoping to have a hover effect on the images in the gallery on my landing page for Squarespace 7.1, that allows a second image to fade in. I've been able to find lots of tutorials for this for 7.0, and for image blocks and products on 7.1, but not for galleries. And I haven't been able to figure out how to set up the classes properly for this use.
I'd like each image in the gallery on my landing page (currently a simple grid, which is the only simple grid gallery on the website) to show a second image on hover, and then those images would link to a page on my site when clicked. I'd only use this effect on my site's landing page (which is also the only page with a masonry grid). Ideally The links are currently set up. Ideally the hover images would be able to be uploaded using this method, but this is flexible.
Question
scottscottsee
Site URL: https://seal-burgundy-yx98.squarespace.com/
I'm hoping to have a hover effect on the images in the gallery on my landing page for Squarespace 7.1, that allows a second image to fade in. I've been able to find lots of tutorials for this for 7.0, and for image blocks and products on 7.1, but not for galleries. And I haven't been able to figure out how to set up the classes properly for this use.
I'd like each image in the gallery on my landing page (currently a simple grid, which is the only simple grid gallery on the website) to show a second image on hover, and then those images would link to a page on my site when clicked. I'd only use this effect on my site's landing page (which is also the only page with a masonry grid). Ideally The links are currently set up. Ideally the hover images would be able to be uploaded using this method, but this is flexible.
Site: https://seal-burgundy-yx98.squarespace.com/
Login with RobHutch
Thanks!
Link to comment
Top Posters For This Question
2
3
1
1
Popular Days
Jun 18
2
Mar 23
1
Jun 17
1
Jun 1
1
Top Posters For This Question
scottscottsee 2 posts
bangank36 3 posts
jdm12991 1 post
chaya1 1 post
Popular Days
Jun 18 2020
2 posts
Mar 23 2021
1 post
Jun 17 2020
1 post
Jun 1 2021
1 post
Popular Posts
bangank36
Since you can grab the uploaded image url, I can suggest you use psuedo :after selector for this, using the unique url in the link tag a[href="/alley-house-1"]:after { background: url(https://
scottscottsee
This is perfect! Thank you so much! You have no idea how helpful this was! For some reason, the scale of the second image wasn't quite working, but I just added "background-size: 100%;" and that
bangank36
@Chuy .portfolio-grid-basic .grid-item:hover .grid-image { opacity: 1; } .portfolio-grid-basic .grid-item .grid-image-inner-wrapper:after { content: ""; position: absolute; width: 10
Posted Images
7 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment