Is it possible to customize hover effects for the Pro Galleries component?

Discussion Ask a question
1

I see that it is possible to have videos play when the mouse is hovered over a video in a pro gallery. Is it possible to say, “on hover, display text with a dark and opaque background” over the particular item in the gallery?

2

Hi @markkhoo95
These Pro Galleries hover options are default, so you will have to work with the options available for hover.
Hover interactions is only available for containers, at the moment.

3

Hi @markkhoo95 ,

As @eduardog said, hover interactions are only available for containers at the moment. But you can try out this workaround:.

In this case, you can use the ‘Custom button’ feature of the Pro Gallery and make it look like text. To do this, follow these steps:

  1. Click on the Gallery.

  2. Click on Settings.

  3. Click on Design.

  4. Click on Buttons.

  5. Enable Custom Button .

  6. Scroll down and set the background color and opacity as you need.

  7. Set the Border Width to 0px to make it look like text.

And there you have it. Now you’ll get custom text whenever someone hovers above the image,

Hope this helps!

4

Hi Guys I would like to do something similar I have Dynamic page, with Dynamic Title that when I rollover a Dynamic Image I would like the image to fade to black and the Dynamic Title to appear.

2534×922 564 KB

5

Hi @russellshort ,

You can do this using hover interactions. Follow these steps:

  1. Add a container. Set its border width to zero and background to black.

  2. Add the image inside the container and stretch it.

  3. Add the text to the container and attach it above the image.

  4. Select the container and from the Inspector Panel , select Hover Interactions .

  5. Click on Add Hover Interaction and then click on Custom Interaction .

  6. Click on the Image and from the right, set the Image Background to black and Background Opacity to 100 and set the Image Opacity between 20-30.

  7. Change the State to Initial .

  8. Click on the text and from the right, set its Opacity to 0%.

  9. Click on Done .

And there you have it. You can add more interactions if you want and check the behaviour in the Preview mode.

Hope this helps!

2 Likes