Change image on hover (Gallery)

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