--- title: "How to Create Image Reveal Effect on Text in WordPress?" url: https://nexterwp.com/docs/create-image-reveal-effect-on-text-in-wordpress/ date: 2024-12-05 modified: 2026-09-27 lang: en author: "Aditya Sharma" description: "An image that appears when visitors hover over a word is a playful way to preview a project or product. The Advanced Typography block in Nexter Blocks Pro adds this..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-Image-Reveal-Effect-on-Text-in-WordPress_-1024x519.jpg word_count: 233 --- # How to Create Image Reveal Effect on Text in WordPress? ## Key Takeaways - Nexter Blocks Pro adds On Hover Image Reveal to the Advanced Typography block, and the feature needs the block switched on under Nexter > Blocks in the WordPress dashboard. - Advanced Typography lets a user type text in Content, turn on Hover Image Reveal, upload an image, and choose Style 1 to 6 under Select Style. - On Hover Image Reveal appears only on the live page while the pointer is over the text, and touch screens do not show it because they have no hover. An image that appears when visitors hover over a word is a playful way to preview a project or product. The Advanced Typography block in Nexter Blocks Pro adds this with **On Hover Image Reveal**. *For every Advanced Typography setting in one place, see the [Advanced Typography block guide](https://nexterwp.com/docs/add-advanced-typography-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-typography/) ## Before You Start - **Edition:** **Pro** — On Hover Image Reveal needs Nexter Blocks Pro.- **Block to enable:** Advanced Typography, switched on under **Nexter > Blocks** in your WordPress dashboard. ## Steps - Add the **Advanced Typography** block and type your text in **Content**. - Open **On Hover Image Reveal** and turn on **Hover Image Reveal**. ![The On Hover Image Reveal panel with the switch on, Upload Image and Select Style](https://nexterwp.com/wp-content/uploads/2026/09/advanced-typography-hover-reveal.webp) - Add an image in **Upload Image** and pick an effect under **Select Style** (Style 1 to 6). - Save and hover over the text on the live page. ## How It Behaves - The image appears only while the pointer is over the text, with the animation of the chosen style.- The effect runs on the live page. The editor shows the text without the reveal.- With **Multiple**, each text item can reveal its own image. ## Limitations - Touch screens have no hover, so phone visitors do not see the image.- Large images load when the page loads. Use web-sized images. ## Troubleshooting ### Nothing appears in the editor That is expected. Preview or open the published page and hover over the text. ## Related Docs - [Advanced Typography block: all settings](https://nexterwp.com/docs/add-advanced-typography-in-wordpress/)- [Combine multiple styles on a text](https://nexterwp.com/docs/combine-multiple-styles-on-a-text-in-wordpress/)- [Add an underline overlay effect](https://nexterwp.com/docs/add-underline-overlay-effect-on-text-in-wordpress/) ## Frequently Asked Questions **Q: What do I need before creating an image reveal effect on text in WordPress?** A: Nexter Blocks Pro is the key requirement, because On Hover Image Reveal is part of the Advanced Typography block. The block itself must also be switched on under Nexter > Blocks in your WordPress dashboard. That matters because the effect is not a standalone toggle inside the editor. If either Pro access or the block enablement is missing, the hover reveal setup will not be available. **Q: How does the image reveal effect behave on the live page?** A: The image only appears while the pointer is over the text, and it uses the animation from the style you picked. Nexter Blocks Pro keeps this behavior tied to the live page, so the editor shows plain text instead of the reveal. That split is normal and helps avoid confusing preview states when you are editing multiple text items. **Q: Why is nothing showing in the editor when I set up the hover image reveal?** A: That is expected behavior for this effect. The editor shows only the text, while the reveal appears on the published page or in preview when you hover over it. This trips people up because they expect a visual result inside the block editor, but On Hover Image Reveal is designed to run on hover, not as a static editor preview. **Q: Does this hover image reveal work on phones and tablets?** A: Touch screens do not have hover, so phone visitors will not see the image reveal. That limitation comes from how hover interactions work, not from a broken setup. If mobile traffic matters for a page, treat this as a desktop-style interaction and avoid relying on it for essential content. **Q: What kind of images should I use for this effect?** A: Web-sized images are the safer choice, because large images load when the page loads. Nexter Blocks Pro does not wait until hover to fetch them, so oversized files can slow down first load even though they only appear later. Keeping images sized for web use reduces unnecessary weight without changing how the effect behaves. **Q: Can each text item show a different image with this effect?** A: Multiple text items can each reveal their own image. That makes the Advanced Typography block useful when you want one line of copy to preview several different visuals instead of reusing a single asset everywhere. It also fits better for product or project lists where each item needs its own hover preview.