How to Create a Rollover Image Effect

To create a Rollover Image Effect, follow these steps:

1. Add a gallery with the "Stacked" design

2. Add 2 images

3. Find a gallery block ID via the Chrome extension "Squarespace Collection/Block Identifier"

4. Copy the styles below to a text/code editor and replace #block with the gallery block ID that you found in the 3 step.

5. Add edited styles to Custom CSS

/* Rollover Image Effect */
#block .sqs-gallery-block-stacked {
  .sqs-gallery {
    position: relative;
  }

  .image-wrapper:hover ~ .image-wrapper {
    opacity: 1;
  }

  .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;
  }
}

Note: You can skip 3-4 steps. Add this style to the page header code injection where is a gallery. Be careful, this code will affect all galleries with the "Stacked" design on a page.

<!-- 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 -->