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
2. Adding the On Hover actions.
  • Select the slideshow element
  • Open the Element Action options
  • Add an action under the On Hover Over category
  • Make action as "Go to slide"
  • Slide select = next slide
  • Add an action under the On Hover Away category
  • Make action as "Go to slide"
  • Slide select = previous slide
Example video of step 2.
3. Test your action on the slideshow.
  • From the top menu, turn actions to "play"
  • Mouse over the slideshow element

If the slideshow element doesn't change on hover over, please confirm you're in play mode. Repeat steps 1 and 2 to check settings.

Example video showing step 3
4. Create navigation action on slideshow element.

Now that the slideshow element has the hover over effect, we should give it some action. In this example, we'll have it take the viewer to a different page in our project. Other examples are that I could open an external URL or show an element.

  • Select the slideshow element
  • From the left-side panel, click the quick-link icon
  • Link to Page
  • Define which page, whether generically "Next" or "Previous", or go to a specific page in our project.
  • Save
  • Preview
Example video of step 4
For more details on how to add interactivity to your CTA buttons, check out our how-to video!
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.
readz logo- mobile
twitter logo
facebook logo
linkedin logo
readz logo
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
VISIT READZ.COM
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES
readz client- nonprofit readz client- health care readz client- sporting goods readz client- financial readz client- legalreadz client- technology readz client- mediareadz client- cosmetics readz client- hospitality readz client- telecommunications readz client- outdoor advertising readz client- ecommerce
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
BEST OF
LATEST
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
Back to Top