Jump to content

Grid Gallery - Changing images on hover - Brine 7.0 template

Recommended Posts

19 hours ago, marztiroo said:

I'd like to add an image gallery grid and make it so that when you hover over each image in the grid, a different image displays. Is this possible? If it is possible, can someone provide the css code? I can plug in the block IDs myself. Thank you!

I think we can set it manually through Css style for each item.

Kindly share your site with the protected password to check it together

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
On 11/30/2021 at 2:16 AM, marztiroo said:

Hello. Our website is https://www.hendrxhealth.com. Below are the images that we'd like to change on hover. Thanks for your help!

2021-11-28_12-01-28.thumb.png.0c1dbdfdf23a4aa069021d2d21e9abd0.png

Add to Design > Custom CSS

/* Gallery images on hover */
div#block-yui_3_17_2_1_1638064932204_46870 {
.slide:hover img {
    visibility: hidden;
}
.slide:nth-child(1):hover a {
    background-image: url(https://cdn.pixabay.com/photo/2019/08/25/08/17/modern-4428919__340.jpg);
}
.slide:nth-child(2):hover a {
    background-image: url(https://cdn.pixabay.com/photo/2021/11/16/15/35/technology-6801334__340.jpg);
}
.slide:nth-child(3):hover a {
    background-image: url(https://cdn.pixabay.com/photo/2021/11/09/16/34/building-6781885__340.jpg);
}}

 

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.