Content · Elementor
Interactive Image Sheen widget for Elementor
Interactive Image Sheen is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Interactive Image Sheen” in the Elementor panel.
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
Interactive Image Sheen is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Interactive Image Sheen” in the Elementor panel.
Interactive Image Sheen Widget (Free). Creates a premium "silk" sheen effect overlay on images/cards that activates on hover for a high-end product presentation.
render() writes HTML data attributes: data-settings.
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 “Interactive Image Sheen”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Mode”, “Image”, “Image Size”, “Image Fit”. Style and Content tabs are listed on this page.
When to use it
- An Elementor page that needs Interactive Image Sheen.
- A layout in the posts, cards, lists, FAQs, and editorial layouts group.
- Search the panel for “Interactive Image Sheen” after King Addons is active.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Source — Mode | The chosen value is read in render() and applied on the front end. Options: Image Only; Card (Image + Content). |
| Source — Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Source — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Source — Image Fit | Writes CSS `object-fit` onto the widget’s front-end markup. Options: Cover; Contain; Fill; None (Original). |
| Source — Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Card Content — Title | Saved on the widget and consumed in render(). |
| Card Content — Title HTML Tag | The chosen value is read in render() and applied on the front end. Options: H1; H2; H3; H4; H5; H6; p; div…. |
| Card Content — Description | Saved on the widget and consumed in render(). |
| Card Content — Show Button | Switcher inspector control (`kng_iis_card_button_show`). |
| Card Content — Button Text | Saved on the widget and consumed in render(). |
| Card Content — Button Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Card Content — Content Position | The chosen value is read in render() and applied on the front end. Options: Below Image; Overlay on Image. |
| Card Content — Overlay Alignment | The chosen value is read in render() and applied on the front end. Options: Top; Center; Bottom. |
| Sheen Settings — Preset | The chosen value is read in render() and applied on the front end. Options: Silk Soft (Wide & Subtle); Gloss Sharp (Narrow & Bright); Dual Streak (Two Lines). |
| Sheen Settings — Angle | Spacing/size control (min -90, max 90). |
| Sheen Settings — Intensity | Spacing/size control (min 0, max 100). |
| Sheen Settings — Animation Duration (ms) | Spacing/size control (min 150, max 2000). |
| Sheen Settings — Animation Easing | Writes CSS `animation-timing-function` onto the widget’s front-end markup. Options: Linear; Ease; Ease In; Ease Out; Ease In-Out. |
| Sheen Settings — Animation Direction | The chosen value is read in render() and applied on the front end. Options: Left to Right; Right to Left; Top to Bottom; Bottom to Top. |
| Sheen Settings — Animation Mode | The chosen value is read in render() and applied on the front end. Options: Play Once on Hover; Loop While Hovering. |
| Sheen Settings — Trigger | The chosen value is read in render() and applied on the front end. Options: On Hover; Always Playing. |
| Container — Width | Writes CSS `width` onto the widget’s front-end markup. (min 100, max 1200). |
| Container — Height | Writes CSS `height` onto the widget’s front-end markup. (min 100, max 800). |
| Container — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Container — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .kng-iis`. |
| Container — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .kng-iis`. |
| Container — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .kng-iis`. |
| Sheen — Sheen Color | Color written to this widget’s CSS selector. |
| Sheen — Base Opacity | Spacing/size control (min 0, max 1). |
| Sheen — Gradient Softness | Spacing/size control (min 0, max 100). |
| Sheen — Sheen Width | Spacing/size control (min 10, max 100). |
| Card Content — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card Content — Text Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Card Content — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .kng-iis__title`. |
| Card Content — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Card Content — Title Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 40). |
| Card Content — Typography (Kng Iis Card Desc Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .kng-iis__description`. |
| Card Content — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Card Content — Description Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 40). |
| Card Content — Typography (Kng Iis Card Button Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .kng-iis__button`. |
| Card Content (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Card Content (Normal) — Background | Writes CSS `background-color` onto the widget’s front-end markup. |
| Card Content (Hover) — Text Color | Writes CSS (button, color) onto the widget’s front-end markup. |
| Card Content (Hover) — Background | Writes CSS (button, background-color) onto the widget’s front-end markup. |
| Card Content — Button Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Card Content — Button Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Card Content — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .kng-iis__button`. |
| Overlay Background — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .kng-iis__content--overlay`. |
| Overlay Background — Background Opacity | Writes CSS `background-color` onto the widget’s front-end markup. (min 0, max 1). |
| Hover Effects — Scale on Hover | Switcher inspector control (`kng_iis_hover_scale`). |
| Hover Effects — Scale Amount | Writes CSS (kng-iis, transform) onto the widget’s front-end markup. (min 1, max 1.2). |
| Hover Effects — Increase Shadow on Hover | Switcher inspector control (`kng_iis_hover_shadow`). |
| Hover Effects — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .kng-iis:hover`. |
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
Which Interactive Image Sheen options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
How do I add Interactive Image Sheen in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Interactive Image Sheen”, 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 content widgets
Image Marquee
Image Marquee is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Image Marquee” in the Elementor panel.
Kinetic Text Hover
Kinetic Text Hover is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Kinetic Text Hover” in the Elementor panel.
Parallax Depth Cards
Parallax Depth Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Parallax Depth Cards” in the Elementor panel.
Pull Quotes & Callouts Builder
Pull Quotes & Callouts Builder is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Pull Quotes & Callouts Builder” in the Elementor panel.
Reveal Swipe Cards
Reveal Swipe Cards is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Reveal Swipe Cards” in the Elementor panel.
Rotating Image Tiles
Rotating Image Tiles is an Elementor widget in King Addons. Enable it under King Addons → Dashboard if it is off, then search for “Rotating Image Tiles” in the Elementor panel.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Interactive Image Sheen after you activate it.