This effect is done by taking a slideshow element that has two images in it, and creating an on hover action that makes the slideshow show the next slide. Then show the previous slide when the user hovers away from the slideshow element.

Here's how to create this effect, broken into four steps.

1. Creating the slideshow element.
  • Add a slideshow element from the Add Elements panel. Once you drop the slideshow element on the page, the project media library will open
  • Upload the two images you plan to use
  • Drag and drop them into the panel above the library (as seen in video directly below)
  • From right-side options in the project media library, make the duration = 0 seconds
  • Arrows = Never
Example video of step 1
readz-logo-black-1readz-logo-black-2
Below is an example of the effect this article will teach you to make. You must be on a desktop or laptop to view the effect.

Hover the mouse cursor over the Readz logo to have it change, then hover away to have it change back to the darker logo.
How to Change Image on Hover Over
For Desktop, use the mouse over effect (aka "hover over") to have an image change to drive viewers to interact with the content.
label 1
Email:
SUBSCRIBE
readz logo- mobile twitter logopink twitter logofacebook logopink facebook logolinkedin logopink linkedin logo
Share:
pinterest logopink pinterest logo
web element- close
DELIVER BETTER EXPERIENCES
LEARN MORE
LEARN MORE
DELIVER BETTER CONTENT EXPERIENCES
web element- close
USING READZ
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
Back to Top