--- title: Advanced Image Widget Settings description: "The default Elementor image widget shows a picture and links it somewhere. The free [Advanced Image widget](https://master-addons.com/element/advanced-image/) in [Master Addons for Elementor](https://master-addons.com/widgets-and-extensions/) does more: it swaps to a second image on hover, drops a corner ribbon on top, opens in…" url: "https://master-addons.com/docs/addons/advanced-image-element/" updated: "2026-09-15" category: Addons --- # Advanced Image Widget Settings The default Elementor image widget shows a picture and links it somewhere. The free [Advanced Image widget](https://master-addons.com/element/advanced-image/) in [Master Addons for Elementor](https://master-addons.com/widgets-and-extensions/) does more: it swaps to a second image on hover, drops a corner ribbon on top, opens in a lightbox, and adds a 3D tilt or colorized shadow, all without touching CSS. You set the main image, an optional hover image, a ribbon, and a handful of effects from the Elementor panel. That makes it a good fit for product shots, portfolio thumbnails, or any image that needs a label or a bit of motion. This guide walks through every tab and setting. ![Master Addons Advanced Image widget in the Elementor Elements panel being dragged onto the page](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/06/30070124/01-advanced-image-widget.webp) Prefer to watch first? This short tutorial walks through the Advanced Image widget end to end: [Different Image on Hover and Image Tilt Effect - Advanced Image Element For Elementor](https://www.youtube.com/embed/fhdwiiy7JiE?feature=oembed) ## What the Advanced Image widget does At its core it shows one image, but it layers extras on top. A hover image swaps in when the cursor is over it, a ribbon calls out a label like "NEW," and the Settings tab adds a lightbox, a tilt effect, and a colorized shadow. Everything is configured from the panel, so the same image can do a lot more than a plain one. The widget has four tabs: Content for the images and ribbon, Settings for behavior like lightbox and tilt, Style for sizing and colors, and Advanced for the usual Elementor spacing and visibility options. ## Before you start - **WordPress** with **Elementor** installed and active. - **Master Addons for Elementor** installed and active. New to the plugin? See the [installation guide](https://master-addons.com/docs/getting-started/installing-plugin/). - One image to show, and a second one if you want the hover swap. ## How to add the Advanced Image widget In the Elementor editor, open the **Elements** panel and search for **Advanced Image**, or scroll to the Master Addons section. Drag it onto your page. It starts with a placeholder, so the first step is choosing an image. ## Set the image In the **Content** tab, the **Image** section holds the basics. Click the image box to pick one from the Media Library, set the **Image Resolution** WordPress should serve, and add an **Image Link** if the picture should link somewhere. ![Advanced Image Content tab Image section with the image picker, Image Resolution dropdown, and Image Link field](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/06/30070129/02-image-content.webp) ## Add a hover image The **Hover Image** section is where the widget earns its name. Turn on **Display Hover Image** and pick a second image. On the live page, the widget shows the first image and crossfades to the second when someone hovers, which is handy for product fronts and backs or before-and-after shots. ![Advanced Image Hover Image section with Display Hover Image toggled on and a second image selected](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/06/30070134/03-hover-image.webp) ## Add a ribbon The **Ribbon** section adds a corner banner over the image. Turn on **Display Ribbon**, set the text, and choose how it looks. ![Advanced Image Ribbon section with display toggle, text field, ribbon style, position, thickness, and width](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/06/30070139/04-ribbon-settings.webp) - **Text:** the label, like NEW or SALE. - **Ribbon Style:** Simple, Corner, or Cross. - **Ribbon Position:** place it in any corner, such as Top Right or Bottom Left. - **Ribbon Thickness and Width:** size the band to fit the text. ## Settings: lightbox, tilt, and shadow The **Settings** tab is where the behavior lives. These are the extras that set the widget apart from a plain image. ![Advanced Image Settings tab with open in lightbox, alignment, preload image, tilt effect, and colorized shadow options](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/06/30070145/05-settings-tab.webp) - **Open in lightbox:** click the image to open it full size in a popup. Turning it on adds an iconic button option (like a plus icon) over the image. - **Alignment:** left, center, or right within its block. - **Preload image:** shows a placeholder while the image loads, such as a blurred preview, a progress box animation, or a loading spinner. - **Tilt Effect:** adds a 3D tilt that follows the cursor for a bit of motion. - **Colorized Shadow:** drops a shadow tinted from the image's own colors. Note that it is not available while the hover image is active. ## Style the image and ribbon The **Style** tab handles sizing and colors. The **Image** section sets the look of the picture itself. ![Advanced Image Style tab Image section with max width, max height, border radius, box shadow, and border type, plus Normal and Hover states](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/06/30070150/06-style-image.webp) - **Max Width and Max Height:** cap the image size. - **Border Radius:** round the corners. - **Normal and Hover states:** set Box Shadow, Border, and background separately for resting and hover. The **Ribbon** style section controls the banner's look: background color, text color, typography, shadows, position offsets, and border radius. ![Advanced Image Style tab Ribbon section with background color, text color, typography, position, and border radius](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/06/30070155/07-style-ribbon.webp) ## The result on the page Publish or preview and the image renders with your ribbon in place and the effects live: hover to swap images, hover for the tilt, or click to open the lightbox, depending on what you turned on. ![Finished Master Addons advanced image on the live page with a purple NEW diagonal ribbon in the top-left corner](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/06/30070200/08-frontend-result-2.webp) ## Common use cases - **Product shots** with a hover swap from front to back or alternate angle. - **Portfolio thumbnails** that open full size in the lightbox. - **Promo images** with a NEW or SALE ribbon in the corner. - **Feature graphics** with a subtle tilt for movement. - **Hero images** using the colorized shadow for depth. ## Tips for working with the Advanced Image widget - **Use matching dimensions for the hover swap.** Same-size images keep the crossfade from jumping. - **Pick the right Image Resolution.** Serving a full-size file into a small slot slows the page; a medium or large size is usually enough. - **Keep ribbon text short.** One word fits the corner band cleanly. - **Skip colorized shadow when using hover swap.** The two do not run together, so choose one per image. - **Go easy on tilt.** A little movement draws the eye; too much feels gimmicky. ## Frequently Asked Questions What is the Advanced Image widget in Master Addons? It is an Elementor image widget with extras built in: a hover image swap, a corner ribbon, a lightbox, a 3D tilt effect, and a colorized shadow. You set all of it from the Elementor panel, so a single image can do far more than the default image widget allows. How do I make the image change on hover? Open the Content tab, expand the Hover Image section, and turn on Display Hover Image. Then choose a second image. On the live page the widget shows the first image and crossfades to the second when a visitor hovers over it. Can I add a ribbon or badge to the image? Yes. In the Content tab, open the Ribbon section and turn on Display Ribbon. Set the text, pick a Simple, Corner or Cross style, and choose the corner. The Style tab then lets you set its color, typography, and position. What is the tilt effect? The tilt effect, found in the Settings tab, adds a 3D tilt that follows the cursor as it moves over the image. It gives a flat picture a sense of depth and motion. Use it sparingly so it stays subtle rather than distracting. Does the Advanced Image widget support a lightbox? Yes. Turn on Open in lightbox in the Settings tab and visitors can click the image to view it full size in a popup. You can also add an iconic button, such as a plus icon, that appears over the image to signal it is clickable. ## Wrapping up The Advanced Image widget takes a single picture and adds the touches that usually take custom code: a hover swap, a ribbon, a lightbox, a tilt, and a colorized shadow. Set the images, switch on the effects you want, and style the result from the panel. For more image tools, see the [Image Hover Effects](https://master-addons.com/element/image-hover-effects/) and [Image Carousel](https://master-addons.com/element/image-carousel/) widgets, browse the full [Master Addons widgets and extensions](https://master-addons.com/widgets-and-extensions/), and see the [Advanced Image widget page](https://master-addons.com/element/advanced-image/) for demos.