In some cases you may want to text appear as an overlay on an image, but only when the user hovers over the image.

The easiest way to achieve this is:

Below is a walkthrough of each of these steps.

In this example, we will start with a grid already on the page, and put our image-with-text-overlay in the center column:

Grab a new container from the left toolbar and drag it onto the stage. Place it in the center column:

With the container element selected, open the background image panel from the right toolbar.

Use the "Add Image" button to upload an image from your local drive, or, if you already have the image that you want to use in your media library, click the "folder" button to select it and drag it into the container:

Grab a text element form the left toolbar, drag and drop it into the container that has the background image.

Double-click into the text element and type your text. To give it the styling you want, apply a class to it or use the right-hand styling panels to change its fonts size, color, and so on.

Use the focus frame to resize the image so that it's the same height as the container. If you want the text to be centered on the image, you can also use the focus frame to add padding above the text:

With the text element selected (not the container with the background image), open the Filters Panel and set the opacity of the text element to 0%:

Then, switch to hover mode using the Hover Mode toggle in the top toolbar:

While in hover mode, go back to the Filter Panel and set the text opacity to 100%:

Finally, exit Hover Mode and de-select the text element on the page. You'll see that the text now appears only when you hover over the element.
​