This effect works by placing an image module directly over another image module using absolute positioning. This does means for each new row of images you want, you will need a new Divi row within the section.


There is no real customisation with this effect, simply add the image you want to show as default in the top module, and the image you want to display on hover in the bottom module.




If you want to change the speed of the transition, change the 1s value in the transition property in this section of CSS:


/*Position the image to be shown on hover*/

.ds-advent-6-image-swap {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}