--- 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-13 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 - Advanced Typography block in Nexter Blocks Pro adds On Hover Image Reveal, and the feature needs the Advanced Typography block switched on under Nexter > Blocks in the WordPress dashboard. - On Hover Image Reveal uses Upload Image and Select Style, with Style 1 to 6, then shows the image only when the pointer hovers over the text on the live page. - Multiple text items each reveal their own image, but touch screens have no hover and phone visitors do not see the image. 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 I can add 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 enabled under Nexter > Blocks in your WordPress dashboard. That matters because the effect is not a standalone toggle inside the editor, it depends on the Advanced Typography block being active first. **Q: How do I make text reveal an image on hover in WordPress?** A: The effect comes from the Advanced Typography block in Nexter Blocks Pro. Add the block, enter your text, then open On Hover Image Reveal and switch it on. From there, upload an image and choose a style from Style 1 to 6. The live page is where the interaction shows up, so testing there is what confirms the setup worked. **Q: Why does nothing show up in the editor when I set up image reveal on text?** A: That behavior is expected. The editor only shows the text without the reveal, while the actual image appears on the published or previewed page when you hover over it. This is a common gotcha with hover-based effects, since they depend on live pointer interaction rather than static editor rendering. **Q: Does image reveal on text work on mobile phones?** A: Touch screens do not have hover, so phone visitors will not see the image reveal effect. That makes this a desktop-style interaction, not something you should rely on for mobile content. If the image matters for understanding the text, keep that limitation in mind before using it as the only way to show important information. **Q: What’s the best image size to use for hover reveal effects?** A: Web-sized images are the safer choice here, because large images load when the page loads. Bigger files can slow down delivery even though the reveal itself only appears on hover. Keeping images sized for the web helps preserve speed while still letting Nexter Blocks Pro show the chosen Style 1 to 6 animation cleanly. **Q: Can each text item reveal a different image?** A: With Multiple, each text item can reveal its own image. That makes this effect useful for lists, product names, or grouped highlights where one shared image would be too generic. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides this inside Advanced Typography rather than as a separate widget.