A hard edge sweeping across two photos suits a renovation. It suits a colour grade or a retouch much less well, where the change is spread across the whole frame.
Opacity mode drops the wipe entirely and cross-fades the two images instead.
For every Before After setting in one place, see the Before After feature guide.
Before You Start
- Edition: Pro — the Before After block needs Nexter Blocks Pro.
- Block to enable: Before After, switched on under Nexter > Blocks in your WordPress dashboard.
Steps
- Add the Before After block and set Mode to Opacity.
- Set both Select Before Image and Select After Image.
- Add labels if you want them, and leave On Mouse Hover on for a pointer-driven fade.
How It Behaves
- The before image fades out as the pointer moves right, revealing the after image underneath — measured on a published page, its opacity went from 0.86 near the left edge to 0.23 near the right.
- There is no dividing line and no wipe — the whole frame changes at once, which is what makes this mode suit changes spread across the image.
- The before label fades along with the image rather than being pushed aside.
- As in the other modes, On Mouse Hover decides whether the fade follows the pointer or is set by clicking.
Limitations
- Opacity mode has no separator. There is no edge to draw a line on, so the Separator Option panel does not appear in this mode — separator line, width, position and icon all belong to the other two modes.
- The fade is driven by horizontal pointer movement only.
- Give both images the same dimensions. Measured with a 1200×800 before and a 900×900 after, the widget takes the after image’s size, so a mismatch crops or letterboxes the comparison.
- Both images are required. With only one set, the block prints “Please select a Before images & After Image” on the page instead of the comparison — measured on a published page.
Troubleshooting
I cannot find the separator settings
Opacity mode does not have them — the panel is hidden for this mode by design, because there is no dividing edge to style. Switch to Horizontal or Vertical if you need a visible separator.
The images jump instead of fading smoothly
Check that both images are the same size. Measured: with a mismatched pair the widget takes the after image’s dimensions, so the two do not sit exactly on top of each other.
Nothing fades when I hover
Check On Mouse Hover under Layout > Content. With it off, click across the image to set the fade instead — measured, dragging does not track.
