Rollover Image Effect

Look Demo

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

How To Install

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.

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

Customize

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.

License

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