Rollover Image Effect

ezgif-5-2048bc76bef6.gif

Step One

Add a gallery with a “stacked” gallery design to any page and add two images.

Once a stacked gallery has been added and saved, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

<!-- Rollover Image Effect -->
<style>
.sqs-gallery-block-stacked .sqs-gallery {
  position: relative;
}

.sqs-gallery-block-stacked .sqs-gallery .image-wrapper:hover ~ .image-wrapper {
  opacity: 1;
}

.sqs-gallery-block-stacked .sqs-gallery .image-wrapper ~ .image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in;
}
</style>
<!-- end Rollover Image Effect -->

Step Three

You do not need to change any of the values or properties.

Be careful, this code will affect all galleries with the "Stacked" gallery design setting.

Save and refresh the page. 👍

Moov Labs