Slide Parallax

Perfect choice for creating the unusual and stylish before-after effects

Create the amazing effect of two images overlapping each other with a slider to unleash the hidden one.

You may check the module examples here.

Watch the video tutorial on Slide Parallax module creation for more details.

General settings

  • Direction – select the direction to slide the images.
    • Horizontal – the images will be sliding horizontally.
    • Vertical – the images will be sliding vertically.
Extra features
  • Animation – choose between 14 preset animation effects.
  • Custom CSS class – enter our own unique class name for the item – this is a useful option for those who want to create a specific style. E.g.: you can type custom-style class and then go to Theme options General options Custom CSS/JS Custom CSS field and write your own CSS code with this class to get your own style.

Images settings

  • First image – upload the first image for the module.
  • Second image – upload the second image which will change the first one for the module.
Images size
  • Image width – set the width for the images.
  • Image height – set the width for the images.

Divider settings

  • Divider image – upload the image which will be set as the divider between the images.
  • Delimiter width – set the width for the divider between the images.
  • Delimiter color – set the delimiter color for the images. The default color is not set for this element.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(;background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header {min-height: 550px;}#main-content .dfd-content-wrap {margin: 0px;} #main-content .dfd-content-wrap > article {padding: 0px;}@media only screen and (min-width: 1101px) {#layout.dfd-portfolio-loop > .row.full-width >,#layout.dfd-gallery-loop > .row.full-width > {padding: 0 0px;}#layout.dfd-portfolio-loop > .row.full-width > > #main-content > .dfd-content-wrap:first-child,#layout.dfd-gallery-loop > .row.full-width > > #main-content > .dfd-content-wrap:first-child {border-top: 0px solid transparent; border-bottom: 0px solid transparent;}#layout.dfd-portfolio-loop > .row.full-width #right-sidebar,#layout.dfd-gallery-loop > .row.full-width #right-sidebar {padding-top: 0px;padding-bottom: 0px;}#layout.dfd-portfolio-loop > .row.full-width > .sort-panel,#layout.dfd-gallery-loop > .row.full-width > .sort-panel {margin-left: -0px;margin-right: -0px;}}#layout .dfd-content-wrap.layout-side-image,#layout > .row.full-width .dfd-content-wrap.layout-side-image {margin-left: 0;margin-right: 0;}