Media · Elementor
Hovering Image Stack widget for Elementor
Stacked images that shift on hover so a set of shots reads as one object.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
Stacked images that shift on hover so a set of shots reads as one object.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Hovering Image Stack”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Image”, “Image Size”, “Link”, “Offset Y”. Style and Content tabs are listed on this page.
When to use it
- A portfolio intro.
- A product gallery teaser.
- An about-page photo cluster.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Items — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Items — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Items — Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Items — Offset Y | Writes CSS `top` onto the widget’s front-end markup. (min -1000, max 1000). |
| Items — Offset X | Writes CSS `left` onto the widget’s front-end markup. (min -1000, max 1000). |
| Items — Width (px) | Writes CSS `width` onto the widget’s front-end markup. (default 200, min 1). |
| Items — Height (px) | Writes CSS `height` onto the widget’s front-end markup. (default 200, min 1). |
| Items — Image Fit | Select inspector control (`king_addons_hovering_image_stack_image_fit`). |
| Items — Image Fit Position | Writes CSS `object-position` onto the widget’s front-end markup. Options: Top; Bottom; Left; Right; Center. |
| Items — Z-Index | Writes CSS `z-index` onto the widget’s front-end markup. |
| Image Stack — Items | Repeater rows; render() loops each item to build the list or slides. |
| Image Stack — Infinite Animation | The chosen value is read in render() and applied on the front end. Options: None; Bounce Small; Bounce Medium; Bounce Large; Fade; Rotating; Rotating inverse; Scale Small…. |
| Image Stack — Animation speed (ms) | Numeric control (default 6000, min 0). |
| Image Stack — Hover Animation | The chosen value is read in render() and applied on the front end. Options: None; Fly Small; Fly Medium; Fly Large; Scale Small; Scale Medium; Scale Large; Scale Inverse Small…. |
| Image Stack — Hover animation speed (ms) | Numeric control (default 300, min 0). |
| General — Width | Writes CSS `width` onto the widget’s front-end markup. (min 1, max 100). |
| General — Minimum Height | Writes CSS `min-height` onto the widget’s front-end markup. (min 0, max 1000). |
| General — Overflow | Select inspector control (`king_addons_hovering_image_stack_image_layers_overflow`). |
| General — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| General (Normal) — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-hovering-image-stack-item img`. |
| General (Hover) — Box Shadow on Hover | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-hovering-image-stack-item img:hover`. |
| General — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-hovering-image-stack-item img`. |
| General — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Hovering Image Stack actually change on the page?
Stacked images that shift on hover so a set of shots reads as one object. Inspector labels from this widget’s PHP include “Image”, “Image Size”, “Link”, “Offset Y”.
How do I add Hovering Image Stack in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Hovering Image Stack”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related media widgets
Image Hover Box
An image tile that reveals title, text, or a link on hover — for services and portfolios.
Image Comparison
A before/after slider. Two images, one divider the visitor drags.
Image Grid
A masonry or fit-rows image grid. No post query — just images.
Vertical Scrollable Image
A tall image that scrolls inside a fixed frame on hover — useful for long page mockups.
Image Hotspots
Pins on an image. Each pin can show a tooltip or open extra content — CSS-based, not a heavy map.
Image Accordion
Panels of images that expand on hover or click. This is a gallery layout, not the FAQ Accordion widget.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Hovering Image Stack after you activate it.