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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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!


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.