Media · Elementor
Image Hover Box widget for Elementor
An image tile that reveals title, text, or a link on hover — for services and portfolios.
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
An image tile that reveals title, text, or a link on hover — for services and portfolios.
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 “Image Hover Box”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Upload Image”, “Image Size”, “Link”, “Layout (effect)”. Style and Content tabs are listed on this page.
When to use it
- A services grid.
- A case-study index.
- A category entry point.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Image — Upload Image | Media Library attachment(s); render() uses the URL/ID as the image source. |
| Image — Image Size | Elementor image-size group (thumbnail, medium, large, full, custom). |
| Image — Link | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Image — Layout (effect) | The chosen value is read in render() and applied on the front end. |
| Image — Always Hovered | Switcher inspector control (`king_addons_image_hover_box_active`). |
| Image — Hover Effect | The chosen value is read in render() and applied on the front end. |
| Image — Height | Select inspector control (`king_addons_image_hover_box_height`). |
| Image — Height (King Addons Image Hover Box Custom Height) | Spacing/size control (min 1, max 600). |
| Image — Image Fit | Select inspector control (`king_addons_image_hover_box_image_fit`). |
| Image — Image Fit Position | Writes CSS `object-position` onto the widget’s front-end markup. Options: Top; Bottom; Left; Right; Center. |
| Texts — Title | Printed in the widget HTML from render(). |
| Texts — HTML Tag | The chosen value is read in render() and applied on the front end. |
| Texts — Description | Printed in the widget HTML from render(). |
| Texts — Alignment | Choose inspector control (`king_addons_image_hover_box_title_text_align`). |
| General — Background Color | Color written to this widget’s CSS selector. |
| General — Image Opacity | Spacing/size control (min 0, max 1). |
| General — Hover Opacity | Spacing/size control (min 0, max 1). |
| General — Hover Border Width | Spacing/size control. |
| General — Hover Border Color | Color written to this widget’s CSS selector. |
| General — Hover Border Width (King Addons Image Hover Box Inner Border Width) | Spacing/size control. |
| General — Hover Border Color (King Addons Image Hover Box Scaled Border Color) | Color written to this widget’s CSS selector. |
| General — Css Filter | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}} .king-addons-image-hover-box img`. |
| General — Hover CSS Filters | CSS filter group (blur, brightness, contrast, saturation). Selector: `{{WRAPPER}}:hover .king-addons-image-hover-box img`. |
| General — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-image-hover-box`. |
| General — Border Radius | Spacing/size control. |
| General — Advanced Border Radius | Apply custom radius values. Get the radius value from. |
| General — Border Radius (King Addons Image Hover Box Image Adv Radius Value) | Text inspector control (`king_addons_image_hover_box_image_adv_radius_value`). |
| General — Blend Mode | Select inspector control (`king_addons_image_hover_box_blend_mode`). |
| Title — Color | Color written to this widget’s CSS selector. |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-image-hover-box-text .king-addons-image-hover-box-text-title`. |
| Title — Background | Choose a background color for the title. |
| Title — Shadow | Elementor text-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-image-hover-box-text .king-addons-image-hover-box-text-title`. |
| Title — Margin | Spacing/size control. |
| Description — Color | Color written to this widget’s CSS selector. |
| Description — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-image-hover-box-text-description`. |
| Description — Shadow | Elementor text-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-image-hover-box-text-description`. |
| Description — Margin | Spacing/size control. |
| Whole Box — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}}`. |
| Whole Box — Border Radius | Spacing/size control. |
| Whole Box — Advanced Border Radius | Apply custom radius values. Get the radius value from. |
| Whole Box — Border Radius (King Addons Image Hover Box Container Image Adv Radius Value) | Text inspector control (`king_addons_image_hover_box_container_image_adv_radius_value`). |
| Whole Box — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}}`. |
| Whole Box — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-image-hover-box-gradient:before, {{WRAPPER}} .king-addons-imag…`. |
| Whole Box — First Layer Transition Speed (seconds) | Spacing/size control (min 0, max 3). |
| Whole Box — Second Layer Transition Delay (seconds) | Spacing/size control (min 0, max 3). |
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 Image Hover Box actually change on the page?
An image tile that reveals title, text, or a link on hover — for services and portfolios. Inspector labels from this widget’s PHP include “Upload Image”, “Image Size”, “Link”, “Layout (effect)”.
How do I add Image Hover Box in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Image Hover Box”, 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
Hovering Image Stack
Stacked images that shift on hover so a set of shots reads as one object.
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 Image Hover Box after you activate it.