Website Building » Wix » How Do I Hover Text Over an Image in Wix?

How Do I Hover Text Over an Image in Wix?

Last updated on May 15, 2023 @ 9:25 am

If you want to hover text over an image on your Wix website, there are a few steps to do it.

The first step is to open the Wix Editor and go to the page where you want to add the image with hover text.


Exciting update! We've collaborated with Wix to offer WBI users with a free plan for all website creation needs - Explore the details here.

Add an image to your page by using the Add Elements (+) button in the left-hand menu and selecting “Image” from the list of options. You can choose to either upload your own images or simply select from the stock images available in Wix.

Once you’ve added an image to your page, go again to the left-hand menu and click on the Add Elements (+) button.

From the list of elements, choose “Text,” and then select the type of text element you want to use, such as a “Heading” or “Paragraph.”

Enter the text you want to display when someone hovers over the image. You can also add style to your text by clicking on the “Edit Text” button which will open the Text Settings window.

Once you’ve added the text element, you can now add the hover effect. You can do this by adding a Hover Box. To do this, just go to the left menu and click on the Add Elements (+) button, then select the “Box” option. From there, choose “Hover Boxes” from the options and select the type of hover box you would like to use.

You can also add other types of boxes. In this case, we added a Container Box. To add a hover effect to this, just click on the thunder icon at the top of the box element, and in the Hover Interactions window that appears, click on the “Get Started” button.

Then, click on the “Choose Effect” button at the top of the element and choose your preferred type of hover effect from the Effects window that will pop up. You can also customize this effect by clicking on the “Customize” button.

Use the settings to customize the appearance and behavior of the hover text box. You can choose the hover percentage, and control the position of the text box relative to the image. Once done, click on the “Exit Hover Mode” at the upper part of the section.

Next is to apply the hover effect to the text. Just click on the “Hover” tab and select the text element, then click on the “Choose Effect” button. Repeat the same steps above for the hover effect of the text.

Save your changes and preview your page to see the hover text in action.

That’s it! With these steps, you can easily add hover text to an image in Wix and customize it to fit your website’s design

PRO TIP: Hover text is a great way to add additional information to an image on your Wix site. However, if not used carefully, it can make your site look cluttered and confusing. Make sure to use hover text sparingly and only when it adds value to the image.

Adding hover text to images on your Wix website is a great way to add more information about them without taking up too much space. By using the Wix Editor’s built-in tool, you can easily add hover text to any image on your site. Experiment with different hover text styles and effects to see what works best for your website design. With the right hover text, you can engage your visitors and keep them on your website longer.


Morgan Bash

Morgan Bash

Technology enthusiast and Co-Founder of Women Coders SF.