Overlay Text On Hover

On my site, on this page I have a grid of pictures. Currently, when you hover over any of them, it zooms in and changes the opacity a bit of the image you have your mouse on.

In addition to this, I would also like to overlay text over the center of the picture on hover.

I followed a few overlay css tutorials but they have a few problems. The text never appears in the middle of the correct picture. The zoom and opacity change also no longer happen. How would I be able to achieve this?

Thanks for any help!

Hi there,

Please note that the support we provide covers questions you have regarding setup, integration, or troubleshooting any piece of functionality that is native to X and what you are aiming to do involves some customizations.

However, instead of doing the manual setup by implementing the markup and writing the CSS, you might want to check some of the bundled plugins that can achieve what you are aiming for without the need of doing any custom coding.

For example, The Grid plugin where you can select different skins on your choice that matches the design that you are aiming for.

Another plugin that you can look into is the Essential Grid plugin.

Hope this helps you get started.

Okay, sorry, didn’t realize it was out of the scope of this support! But thanks for pointing me in the right direction!

You’re welcome! :slight_smile:

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