Rollover Image Effect

• Look Demo
• How To Install
• Customize
• License

Add a roll over effect on an image using the gallery block. This plugin uses css editor and works with all template families.

Add a Gallery Block with a “Stacked” gallery design to any page with two images. Save the page when done.

Next, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

Copy Code

// Rollover Image Effect //

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

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.

This plugin comes with an Unlimited Use License. View License Terms