Overview
A picture says a thousand words. But sometimes an image needs text to make it even more impactful. Until now, you have probably been using captions to add necessary text to an image, whether it’s crediting a source, adding context, or explaining key information. But there is another way to include text – with an overlay. Overlay text is text that displays when the user hovers over an image with their cursor.
This is a clean and simple way to include text without overcrowding a page. Learn how to create overlay text with Image Overlay on Lunteer with this tutorial.
What Is Image Overlay?
Image Overlay enables you to superimpose text over an image. You can add an image overlay to any image on a page, post, slider, or template.
When to Add Image Overlay
While you can use Image Overlay for many purposes, the best time to use it is with an image caption.
On business website pages like product pages, client pages, or even home pages, captions can be boring and distracting for a visitor. For articles or blog posts, however, it is standard to use a classic caption below the image.
You are not limited to just these use cases. Whenever a caption or description for an image doesn’t quite fit below, above, or next to the image, Image Overlay is a creative solution.
Adding Image Overlay on the Lunteer Platform
Step 1: Navigate to the Main Dashboard
Step 2: Select the content type (Post, Page, Slider, Template) to which you want to add an image with overlay.
Step 3: Click the Insert Media button.
Step 4: The Choose an Image screen will open. Upload your own saved image or select an image from the Media Library.
Step 5: Give your image an Alternative Text and select the Size you would like to use in your content. The click Use to confirm the image selection. The editor screen will re-open, displaying your selected image within the section that you defined.
Step 6: To add the overlay, click your image to open the editing menu bar. Then click the Edit icon (a pencil).
Step 7: The Image Details screen will open, enabling you to add optional details including an Image Caption and Caption Position (below image or over image with mouse hover.)
Step 8: Add your overlay text in the Image Caption field.
Step 9: Under Caption Position select Over image on mouse hover to activate Image Overlay.
Step 10: Click Update to confirm your changes or, to preview your image as it will appear on your site, click Preview Post in the upper left corner of the editor screen. Click Save Draft if you are not ready to publish or click Publish to push your new content to your live site.
Conclusion
Whether you are designing a home page, product page, or just hate captions on images, image overlay is a graceful way to include content on your page without negatively impacting design. The best part is that you have the knowledge and ability to make it happen – no developers needed!