emcp_custom_187Image Swap
Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: image, swap, hover, flip, reveal, product, before after.
Setup guide
- Open a page in Elementor, search the panel for Image Swap and drag it into a container.
- Content › Images: Default Image, Swapped Image, Swap On, Effect, Duration (ms), Auto Interval (ms), Aspect Ratio, Link and 5 more.
- Pick a Effect: Fade, Slide from right, Slide from bottom, Zoom in, Zoom out, 3D flip, Blur, Wipe (diagonal), Circle reveal, Curtain (split). Each one is shown below.
- Style tab sections: Frame, Caption, Badge & Hint. Colours, typography and spacing set here are scoped to this widget instance.
- Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.
Auto Interval (ms) appears when Swap On is auto.Fade
Effect = fade
Hover meSlide from right
Effect = slide-left
Hover meSlide from bottom
Effect = slide-up
Hover meZoom in
Effect = zoom
Hover meZoom out
Effect = zoom-out
Hover me3D flip
Effect = flip
Blur
Effect = blur
Hover meWipe (diagonal)
Effect = wipe
Hover meCircle reveal
Effect = circle
Hover meCurtain (split)
Effect = curtain
Hover
Swap On = hover
Hover meClick / tap (toggle)
Swap On = click
Hover meAuto (interval)
Swap On = auto
Hover meWhen scrolled into view
Swap On = scroll
Hover meOptions reference
Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).
Content tab
Images
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Default Imageimage_a | Image | |||
Swapped Imageimage_b | Image | |||
Swap Ontrigger | Dropdown | Hover, Click / tap (toggle), Auto (interval), When scrolled into view | hover | |
Effecteffect | Dropdown | Fade, Slide from right, Slide from bottom, Zoom in, Zoom out, 3D flip, Blur, Wipe (diagonal), Circle reveal, Curtain (split) | fade | |
Duration (ms)duration | Number | min 100, max 3000 | 600 | |
Auto Interval (ms)interval | Number | min 500, max 20000 | 2500 | Shown when trigger = auto |
Aspect Ratioratio | Dropdown | Natural (default image), 1:1, 4:3, 3:4, 16:9 | auto | |
Linklink | Link | |||
Default Captioncaption_a | Text | |||
Swapped Captioncaption_b | Text | |||
Badgebadge | Text | |||
Corner Hint Iconicon | Icon | fas fa-sync-alt | ||
Show Hint Iconshow_hint | Toggle | on / off | yes |
Style tab
Frame
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Radiusradius | Slider | min 0, max 80, px/% | 16 | |
Borderborder | Border | |||
Shadowshadow | Box shadow | |||
Hover Shadowshadow_h | Box shadow | |||
Max Widthmaxw | Slider | min 100, max 1600, px/% | ||
Alignmentalign | Button group | Left, Center, Right | left | |
Image Fitfit | Dropdown | Cover, Contain | cover | |
Default Image Filtersfilter_a | Css_filter | |||
Swapped Image Filtersfilter_b | Css_filter | |||
Frame Backgroundbg | Color | #f2f4f7 |
Caption, Badge & Hint
| Option | Type | Choices / range | Default | Notes |
|---|---|---|---|---|
Caption Typographycap_typo | Typography | |||
Caption Colorcap_color | Color | #101828 | ||
Caption Aligncap_align | Button group | Left, Center, Right | center | |
Badge Colorbadge_color | Color | #ffffff | ||
Badge Backgroundbadge_bg | Color | #101828 | ||
Hint Icon Colorhint_color | Color | #101828 | ||
Hint Backgroundhint_bg | Color | rgba(255,255,255,0.9) | ||
Hint Sizehint_size | Slider | min 20, max 80, px | 36 |
Add it with the MCP tools
Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_187" and a settings object using the keys above. Run get-custom-widget with id 187 for the full JSON spec.