What It Does
The Modern Image Effect is a background option inside the Nexter Blocks Container block. It lets you place one or more images in the Background Middle Layer of a Container and animate them as the visitor scrolls the page, so the images move at a different pace than the rest of the content instead of sitting static behind it.
With the Container block from Nexter Blocks, you can add an image scroll animation effect to any section in WordPress.
To check the complete feature overview documentation of the Nexter Blocks Container block, click here.
Requirement – This block is a part of Nexter Blocks. Make sure it is installed and activated.
Why It Matters
A flat, static background rarely holds attention on its own. Layering multiple images that shift position as someone scrolls gives a section visual depth without needing a page builder plugin or custom JavaScript. It is the difference between a background that just fills space and one that actively guides the eye down the page.
What You Get
A Background Middle Layer on the Container block set to Modern Image Effect, where you can:
- Add multiple images to a single section and position each one independently.
- Move each image on scroll using the Magic Scroll settings.
- Add a hover-move effect and a visual effect on top of the scroll animation.
- Control per-image opacity, width, layering (z-index), and per-device visibility.
Benefits
- Adds a layered, parallax-style visual without a separate animation plugin.
- Works directly in the block editor with live desktop, tablet, and mobile controls.
- Every image in the list can be positioned, resized, and animated on its own, so one section can combine several moving layers.
Capabilities
Each item in the Image List carries its own set of controls:
- Position – Left, Right, Top, and Bottom (Auto %) fields, each configurable separately for desktop, tablet, and mobile.
- Width – a responsive width control with separate desktop, tablet, and mobile values.
- Opacity – adjusts the image transparency level.
- Effect Intensity – controls the hover-move effect. A higher value reduces the intensity; a negative value moves the image in the cursor direction, a positive value moves it in the opposite direction.
- Effects – a dropdown that applies an additional visual effect to the image.
- Magic Scroll – a toggle that opens the Magic Scroll options shared across Nexter Blocks, used to define how the image moves as the page scrolls.
- Responsive Visibility – hides the image on specific device sizes.
- Z-index – layers the image over or under other page elements.
Two image items are included by default, and you can add more with the + Add Item button.
How It Works
The Container block’s Background Middle Layer sits between the container’s base background and its content. When you switch that layer to Modern Image Effect, each image in the Image List is rendered as its own positioned element inside that layer. The Magic Scroll settings then bind each image’s movement to the page’s scroll position, so as a visitor scrolls, every image shifts independently based on the position, width, and effect values you set for it, while the Effect Intensity value additionally drives how the image reacts to cursor movement.
How to Use It
Add the Container block with the appropriate layout to the page and follow the steps:
1. Go to Style → Background Middle Layer.
2. Select Modern Image Effect from the Select Background Option dropdown.
3. In the Image List section, you will find two items by default.
4. Open one item. In the Select Image section, add your image.
Adjust the image position using the Left (Auto %), Right (Auto %), Top (Auto %), and Bottom (Auto %) controls. Each control is available for desktop, tablet, and mobile separately.
Set the image width from the Width section, with separate controls for desktop, tablet, and mobile.
From the Opacity field, adjust the image transparency level.
To add a hover-move effect, set a value in the Effect Intensity field. A higher value reduces the intensity. A negative value moves the image in the cursor direction. A positive value moves it in the opposite direction.
From the Effects dropdown, apply a visual effect to the image.
5. Enable the Magic Scroll toggle.
This opens the Magic Scroll options available with Nexter Blocks. Set the scrolling settings to match your requirements.
From the Responsive Visibility toggle, hide the image on specific device sizes.
In the Z-index field, set a value to layer the image over other page elements.
Repeat the process to configure the second item.
Click the + Add Item button to add more images to the section.
The section now shows the image scroll animation effect as visitors scroll the page.
Use Cases
Best Used For:
- Agency and portfolio sites with hero sections that animate on scroll to grab attention.
- SaaS landing pages where background image layers shift as visitors scroll through feature sections.
- Event or product launch pages that use parallax-style image movement to add visual depth.
Limitations
- The Modern Image Effect is a Background Middle Layer option on the Container block only; it is not available as a standalone effect on other Nexter Blocks.
- Nexter Blocks must be installed and activated on the site, or the Modern Image Effect option will not appear in the Select Background Option dropdown.
- The Opacity field controls image transparency only; it does not add a separate color overlay on top of the image. A dedicated overlay layer is not part of this control set.
- The scroll movement itself is configured through the shared Magic Scroll options, so each image’s animation behavior depends on those settings rather than being unique to the Container block.
- Stacking several animated, full-size images in one section adds extra elements the browser has to position and repaint on every scroll event, so heavier image lists are worth testing for scroll smoothness on lower-powered devices.
Troubleshooting
I want an overlay on top of my scrolling/parallax image, but I can’t find that option
A POSIMYTH support ticket (Nexter WP, #18529, “How do I apply an overly on top of a parallax image?”) raised exactly this: the customer expected a dedicated overlay control and only found background-color settings that sit behind the image, not on top of it. The Modern Image Effect’s Opacity field adjusts the image’s own transparency, it does not add a separate overlay layer. To fake an overlay, place a semi-transparent background color on the Container itself, or reduce the image’s Opacity value, and adjust from there.
The scroll animation looks fine on desktop and Android but not on an iPhone
Disclosure: this is not a ticket about the Container block specifically. A POSIMYTH support ticket (The Plus Addons for Elementor, #1643, “Fixed background image parallax on iphone”) documents the same class of problem on a different POSIMYTH plugin’s fixed-background parallax setting: it rendered correctly on desktop and Android but not on iOS Safari. Scroll- and fixed-position image effects are handled differently by iOS Safari, so if an image animation does not appear on iPhone, test the Magic Scroll settings specifically in iOS Safari before assuming the setup is wrong.
The Modern Image Effect option doesn’t show up in the Select Background Option dropdown
Disclosure: not sourced from a support ticket, this follows directly from the Requirement stated above. The Modern Image Effect option ships as part of the Nexter Blocks plugin’s Container block. If the dropdown does not list it, confirm Nexter Blocks is installed and active on the site.
