Hi, Can anyone give me some tips on getting an icon to show over an image on hover. I have used particles to have transparent colour panel to show on hover, but I can’t figure out how to get the icon to show.
I thought I could have an icon element positioned over the image that only showed up on hover using effects, but I’m not sure.
Any help would be appreciated
Cheers
David
Hello @davidwdesign,
Thanks for writing in!
Do you want to display something like this?
The icon is position at the middle of the image and only appears when you hover over the image? If that is the case, you can do the following to make it possible:
1.) Insert a DIV element in your column.
2.) Insert the Image element inside your DIV element.
3.) Insert another (or nested) DIV element inside the existing DIV element.
4.) Insert the Icon element inside the second DIV element. Your skeleton structure would be like this:
5.) In your second DIV element, set the Position to absolute while adding the 35% top value and 50% left value.
6.) You also need to add a negative left margin to make sure that your icon will display at the center of the image.
In my example above, I am using -25px because my icon is 50 pixels wide. This negative value will depend on the width of your icon.
7.) In your second DIV element, go to the Effects option and set the opacity to 0.
8.) Enable the Interaction and set the opacity to 1 which means that upon hover, the DIV element (and all of its contents which is the icon) will display.
9.) Now, click the first DIV element and go to the Effects setting. You will need to enable the “Link Child Interactions” and set the Interaction to “Transform”.
Hope the steps are clear and easy to follow. Kindly let us know how it goes.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.