Rollover/Hover Image Change with Link

Hi. How can I make an image change to another image when someone hovers over it? The image needs to be clickable / link to another page.
Here is an example of what we are looking to do to our team section: https://makiaj.com.

Hi Ashley,

Thank you for writing in, yes that is possible by using a div element. Please see this structure

See that element in there, that will act as the front layer image. And the Image element underneath is the back layer image.

Your Div element position should be set up like this:

And the Div Effect Interaction should be set up like this.

So when you hover over the div, it will disappear and show the other image behind it.

Let us know how it goes,
Cheers!

I’m not seeing that element.

I think we have an older version - the X version.

Hello Ashley,

You need to update to a much newer version preferably the X theme 8.0.0 and Cornerstone 5.0.0 or higher. By the way, our latest versions are:

  • X theme 9.0.8
  • Cornerstone 6.0.8

This latest release contains fixes for several issues so be sure to check out the changelog:

After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.