Jump to content

Change image on hover (Gallery)

Go to solution Solved by Beyondspace,

Recommended Posts

  • Solution
13 hours ago, Erwan said:

Hey !

On my website (erwanlier.com) I have a gallery (work). Whenever someone hover on one of my project, I would like to change the image to something else, a gif.
What code should I use ? Thanks 

 

You can try adding to Home > Design > Custom Css

/*general setting for second image*/
section[data-section-id="5eedcddf0106b74183e0f58d"] .grid-item .grid-image:after {
  content:'';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

section[data-section-id="5eedcddf0106b74183e0f58d"] .grid-item:hover .grid-image-inner-wrapper {
  opacity: 0;
}

/*set url for each item*/
section[data-section-id="5eedcddf0106b74183e0f58d"] .grid-item:first-child .grid-image:after {
  background-image: url('https://images.unsplash.com/photo-1658140917228-129162d2a5b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
}

section[data-section-id="5eedcddf0106b74183e0f58d"] .grid-item:nth-child(2) .grid-image:after {
  background-image: url('https://images.unsplash.com/photo-1658140917228-129162d2a5b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
}

Let me know how it works on your site

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

My testing

image.thumb.png.c53b545ca57643d421c102d4bfa7fe5e.png

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

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.