Advanced Image
An image on your website should do more than just sit there. The Advanced Image element supercharges the basic picture with smart, interactive features. Create eye-catching “before-and-after” hover effects, add stylish “NEW” or “SALE” ribbons, apply dynamic tilt effects on mouse move, and even add colorful shadows. With full control over lightboxes, links, and every aspect of styling, you can transform any image into a engaging piece of content that guides visitors and boosts interaction. Perfect for product showcases, portfolios, or featured banners.
Hover Image & Smart Effects
Create instant “before-and-after” comparisons or simple hover reveals. Upload your main image, then enable Hover Image to upload a second picture. When visitors hover, the image seamlessly switches. Add a layer of sophistication with the Tilt Effect, which makes the image tilt slightly as the mouse moves over it, adding a subtle 3D feel. For extra depth, enable Colorized Shadow to place a soft, colored shadow behind the image, making it pop off the page.
- Interactive Comparisons: Perfect for showing a product before and after, or a day/night view of a property.
- Engaging Tilt Effect: Adds a modern, interactive layer that responds to cursor movement.
- Visual Depth: Use the Colorized Shadow to create separation and focus without extra design elements.
Customizable Ribbons & Labels
Make your images stand out with professional ribbons. Enable the Ribbon feature to add a label like “NEW DESIGN,” “BESTSELLER,” or “SOLD OUT.” Choose from different Ribbon Styles (like Corner or Cross or Simple) and set the Position (Top/Bottom, Left/Right). Fully customize the ribbon’s colors, typography, and thickness to ensure it complements your image and brand perfectly.
- Highlight Key Information: Instantly communicate status, promotion, or category directly on the image.
- Flexible Positioning: Place the ribbon in any corner to avoid covering important parts of the picture.
- Complete Style Control: Match the ribbon’s background, text color, and font to your site’s design language.
Add Link & Lightbox Integration
Every image can be a gateway. Link your image directly to a URL, like a product page or your pricing plan. Alternatively, enable a Lightbox to let viewers focus on the image in a beautiful, full-screen popup. Choose from different lightbox Icons (like a plus button) and control its alignment. For performance, use the Preload Image option to ensure fast loading, especially for hover effects.
- Direct Calls-to-Action: Link images to important pages, turning visual interest into direct traffic.
- Enhanced Gallery Experience: Let users view images in detail with an elegant lightbox.
- Optimized Performance: Preload hover images to prevent a delay or “flash” on the first interaction.
Detailed Styling & Sizing Control
Get complete design control over your image’s presentation. Set exact Max Width and Max Height. Apply Border Radius individually to each corner for unique shapes. Style the Normal and Hover states separately with borders, backgrounds, and box shadows. This ensures your image looks perfect in every context and during every interaction.
- Responsive Sizing: Control the image’s dimensions precisely without relying on unpredictable auto-sizing.
- Custom Shapes: Create circular images, rounded rectangles, or unique asymmetric borders.
- State-Specific Styling: Add a border or shadow only on hover to visually indicate the image is interactive.
Frequently Asked Questions For Advanced Image
Is the Hover Image effect compatible with mobile touchscreens?
Yes, but it works a bit differently. On touch devices, the first tap will often trigger the hover effect (swapping the image), if you haven’t enabled the lightbox. But if you have enabled the lightbox then lightbox will get more priority and on tap the first image will open in lightbox.
Will using the Tilt Effect and Colorized Shadow slow down my page?
These effects use CSS, which is generally lightweight. However, using them on a very large number of images on a single page (like in a dense grid and 100+ images) could contribute to a heavier load on the user’s device. Use them selectively on key images for the best performance and impact.
How is this different from Elementor's basic Image widget?
Elementor’s basic widget lets you add an image, a link, a caption, and some simple styling. The Advanced Image element adds a suite of professional features: Hover Image swap, Ribbons/Labels, Tilt Effect, Colorized Shadow, separate Normal/Hover state styling, and more granular lightbox controls. It’s designed for creating more engaging, interactive image presentations.
Can I use the ribbon feature without a hover image or other effects?
Absolutely! Each feature is independent. You can have just an image with a ribbon, or just an image with a tilt effect. You can mix and match features as you like. Enable only the ones you need for your specific design goal.
What’s the best use for the 'Preload Image' setting?
Enable Preload Image (set to ‘On’) when you are using the Hover Image feature. This forces the browser to load the second image when the page loads, even though it’s hidden. This prevents a noticeable delay or a blank flash the first time a user hovers over the image, ensuring a smooth user experience.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
