Rollover Image on Hover

Version 1: HTML + CSS

Add a Code Block

<a href="LINK HERE">
  <div id="ELEMENT NAME HERE">
  </div>
</a>

Add to Custom CSS

/* Rollover Image Hover */
#elementnamehere {
   background-image: url('FIRST IMAGE');
   height: 300px;
   width: 300px;
   background-size:contain;
}

#elementnamehere:hover {
   background-image: url('HOVER IMAGE');
 }

Version 2: Gallery Block — Stacked Layout

Source: Sqsp Themes

1. Add a Gallery block using Stacked layout design

2. Add your 2 images

3. Insert code in page header code injection (specific page code)

** To target specific gallery blocks, add the specific #blockID before each line of selectors

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