Hover Over Image to change to other image the is clickable

[RevealHM]

Hello,

I want a different image that is clickable to appear when I hover over an image. I posted this earlier prior to updating. Now, I can’t figure out how to do it.

I’ve followed the steps from my previous post below. I’ve managed to get the photo to fade out but the second image is not appearing. You can see how far I’ve come – it is the upper right girl with blond hair.

Beauty Tips - Reveal Hair & Makeup

Rollover/Hover Image Change with Link

Hi Ashley, Thank you for writing in, yes that is possible by using a div element. Please see this structure [image] 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: [image] And the Div Effect Interaction should be set up like this. [image…

Appreciate the help.

[marc_a]

Hi Ashley,

Would you mind sharing your admin credential so that we can check your progress? To do that, please give us the following information in a Secure Note.

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

[friech]

Hi Ashley,

It seems you forgot to provide password, please check.

Please try enable the graphic on the button, then set the first image on that button. Then the second image should be set as the column background.

Thanks,

[RevealHM]

Whoops, I added the password. Okay I made sure of that and it’s showing the background image upon hover, however, I’m getting a back line on the bottom of the image and a little border. How can I make it all white?

Thank you.

[tristup]

Hi Ashley,

The border shown in the image is set through the Primary and Secondary particles of the Column, please find the screenshot describing the settings.

Hope it helps.
Thanks

[RevealHM]

There is still a small border around the background image even with the primary and secondary particles color is turned to transparent.

Also, I’m still having trouble. The second photo of the brown haired girl… I can’t get the background image to show up on hover. I’ve put an image as the column background and selected transform.

Do I need to have the div component in there or can I just have an image and set the column background as the second image I need and turn on transform?

[friech]

Hi Ashley,

I am not seeing the small border issue anymore, I supposed you already resolved it.

I notice that you place the text as an Image, well in this case you can have a simpler structure, a column, and an image element, like what you did on the second image (Coco)

Apply the second image as a background on the column. No need for upper-layer background and effect on this column.

Apply the effect on the image.

Hope it helps,
Cheers!

[RevealHM]

Thank you! I’m not sure what I did but I got one to look the way I wanted it too and then just duplicated it over and over haha. Thank you for your help.

Is there a way to make the transition go a little slower? Instead of immediately showing the other photo can it be slowed down just a little bit?

[ruenel]

Hello Ashley,

Please click on each and every Image element and in the Effects settings, set the Transition > Duration to 1000ms.

Kindly let us know how it goes.

[RevealHM]

Yay that worked. Thank you very much for all of your help!

[friech]

We are delighted to assist you with this.

Cheers!