--- title: "How to Add Advanced Effects to an Image in WordPress?" url: https://nexterwp.com/docs/add-advanced-effects-to-an-image-in-wordpress/ date: 2024-12-09 modified: 2026-09-15 lang: en author: "Aditya Sharma" description: "A picture on a page is usually just a picture. The Advanced Image block adds the things people normally reach for a second plugin to get: a lightbox, a shaped..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Advanced-Effects-to-an-Image-in-WordPress_-1024x519.jpg word_count: 638 --- # How to Add Advanced Effects to an Image in WordPress? ## Key Takeaways - Advanced Image block adds five effects to a WordPress image: lightbox, shaped mask, reveal on scroll, hover scroll and parallax drift. - Nexter Blocks Pro is required for Scroll Reveal Image, Scrolling Image, Scroll Parallax and Enable Caption, while Mask Image Shape and FancyBox work in the free plugin. - FancyBox opens the full-size image even when Image Size is set to Large, which serves the 1024px file instead of the original. - URL field overrides FancyBox, so a link in the URL field turns the image into an ordinary link and prevents the lightbox from opening. A picture on a page is usually just a picture. The Advanced Image block adds the things people normally reach for a second plugin to get: a lightbox, a shaped mask, a reveal on scroll, a hover scroll and a parallax drift. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-advanced-image/) ## Before You Start - **Edition:** **Freemium** — the Advanced Image block is in the free plugin, and some of its effects need Nexter Blocks Pro.- **Block to enable:** Advanced Image, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your image in the Media Library**, at a size large enough for where it will sit. https://www.youtube.com/watch?v=9tP5GP1Pl-M ## Steps - Add the **Advanced Image** block to your page and click **Design from Scratch**. - In the **Content** panel, upload or choose your image, then set **Image Size** and **Alignment**. ![The Content panel with Image Size and Alignment](https://nexterwp.com/wp-content/uploads/2026/09/advimg-image.webp) - Open **Special Options** and switch on the effect you want. They can be combined. ![The Special Options panel with all five effects](https://nexterwp.com/wp-content/uploads/2026/09/advimg-special.webp) - Publish and check the page — several of these effects only show once the page scrolls or the visitor hovers. ## What Each Panel Controls | Panel | What you set there | | ----- | ------------------ | | Content | The image, its link, alignment, maximum width, float and image size | | Caption | A caption under the image | | Special Options | The five effects — reveal, hover scroll, mask, parallax and lightbox | ## The Five Effects, and What They Need | Effect | What it does | Edition | | ------ | ------------ | ------- | | [Scroll Reveal Image](https://nexterwp.com/docs/add-image-reveal-animation-on-scroll-in-wordpress/) | A coloured panel sweeps off the image as it comes into view | **Pro** | | [Scrolling Image](https://nexterwp.com/docs/add-a-scroll-on-hover-to-an-image-in-wordpress/) | A tall image travels inside a fixed box while hovered | **Pro** | | [Mask Image Shape](https://nexterwp.com/docs/mask-an-image-in-wordpress-custom-image-mask/) | The image is cut to the shape of another image | Free | | [Scroll Parallax](https://nexterwp.com/docs/add-a-parallax-image-in-wordpress/) | The image drifts as the page scrolls | **Pro** | | FancyBox | Clicking opens the full-size image in a lightbox | Free | > ***The free plugin shows these toggles too, with no Pro marker.** Scroll Reveal Image, Scrolling Image, Scroll Parallax and Enable Caption all appear in the free editor and simply do nothing on the published page — measured by rendering the same block with Pro active and deactivated.* ## How It Behaves - **Image Size** is honoured — choosing *Large* served the 1024px file rather than the original.- **FancyBox always opens the full-size image**, whatever size you display, so the lightbox stays sharp.- **A URL beats the lightbox.** With both a link and FancyBox set, the image became an ordinary link and clicking it navigated away — the lightbox never opened. Use one or the other.- **The effects can otherwise be combined.** FancyBox and Scroll Parallax together both worked, for example.- Alignment, Max Width and Float Align are plain layout controls and apply in both editions. ## Limitations - **Four settings do nothing on the free plugin** and are not marked as Pro in the editor: Scroll Reveal Image, Scrolling Image, Scroll Parallax and Enable Caption.- **Drop Shadow and Filters cannot both apply.** They write to the same CSS property, and with both set only the drop shadow survives — the brightness and contrast are silently dropped. Drop Shadow is Pro-only.- **Scrolling Image produces no real image element.** It paints the picture as a CSS background, so it carries no alt text and does not count as an image to search engines. Keep it for decoration.- The scroll-based effects need a page long enough to scroll. Test on a page long enough to actually scroll. On a short page there is no scrolling for the effect to respond to, and a working setting looks broken. ## Troubleshooting ### I switched an effect on and nothing changed Check your edition first. Scroll Reveal, Scrolling Image, Scroll Parallax and the caption all need Nexter Blocks Pro and do nothing without it, even though the toggles are visible. ### The lightbox does not open There is a link in the **URL** field. Clear it — a link takes priority over FancyBox. ### My colour filters disappeared **Drop Shadow** is on. Turn it off and the filters come back. ### The block is missing from the inserter Switch **Advanced Image** on under **Nexter > Blocks** in your dashboard. ![Advanced Image switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/advimg-admin-enable.webp) ## Related Docs - [Image reveal animation on scroll](https://nexterwp.com/docs/add-image-reveal-animation-on-scroll-in-wordpress/)- [Scroll an image on hover](https://nexterwp.com/docs/add-a-scroll-on-hover-to-an-image-in-wordpress/)- [Mask an image to a custom shape](https://nexterwp.com/docs/mask-an-image-in-wordpress-custom-image-mask/)- [Parallax image](https://nexterwp.com/docs/add-a-parallax-image-in-wordpress/) ## Frequently Asked Questions **Q: Why does the Advanced Image block show toggles but nothing changes on the page?** A: That usually means the effect is one of the free-editor toggles that only works with Nexter Blocks Pro. Scroll Reveal Image, Scrolling Image, Scroll Parallax, and Enable Caption can appear in the free editor and still do nothing on the published page. The practical check is edition first, because the toggle alone is not proof that the effect is active. **Q: What should I use if I want a lightbox instead of a normal image link?** A: FancyBox is the lightbox option in the Advanced Image block, and it opens the full-size image even when you display a smaller size on the page. The catch is that a URL in the image field wins over FancyBox, so a linked image will behave like an ordinary link instead of opening the lightbox. For a clean lightbox experience, use one or the other. **Q: Why did my image filters disappear when I added a drop shadow?** A: Drop Shadow and Filters cannot both apply because they write to the same CSS property. When both are set, only the drop shadow survives and brightness or contrast gets dropped silently. That means if color adjustments matter more than shadow depth, turn off Drop Shadow first. In this block, Drop Shadow is also Pro-only. **Q: How do I stop an effect from looking broken on a short page?** A: Scroll-based effects need enough page length to actually scroll. If the page is too short, there is no scroll movement for Scroll Reveal Image or Scroll Parallax to respond to, so a working setting can look broken. The fix is not in the block itself but in the page context: test on a page long enough to scroll. **Q: Can I combine multiple Advanced Image effects on one image?** A: The block allows combinations, and some pairings work together. The page specifically says FancyBox and Scroll Parallax worked together, so this is not a one-effect-only setup. That matters because layout controls like Alignment, Max Width, and Float Align still apply normally in both editions while effects stack on top. **Q: What do I need before adding an Advanced Image effect in WordPress?** A: The block needs three basics before any effect makes sense: Advanced Image must be switched on under Nexter > Blocks, your image should already be in the Media Library at a size large enough for where it will sit, and you need to add the Advanced Image block to the page. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter provides this as part of its freemium setup.