Advance Image

Author: An Do 3013 views

The Advanced Image element is designed to create interactive visual effects by displaying another image when customers hover over it. It helps make your store more dynamic and engaging while allowing you to showcase multiple visuals within a single image area. You can preview how it works on the live page through the video below.

You can find the Advanced Image element in EComposer editor > Elements > Advanced:

1. Content

1.1 General

Link: After clicking on the image, you can either open it in the lightbox or redirect the customer to another link. We have 3 options for it: None, Media File, Custom URL.

Enable Overlay: Enable this option to add a semi-transparent overlay on top of the image, helping enhance visual effects and improve text readability. After enabling the overlay, you can choose the Title Source:
- Alt: Display the image alt text as the title on the image.
- Custom: Display custom content entered in the Custom Title field.

Use Image Caption: Display a text caption below the image to provide additional information or descriptions.

Open in Lightbox: Open the image in a larger pop-up view when customers click on it.
Display Lazy Load: Enable lazy loading to improve page performance by loading the image only when it becomes visible on the screen.

1.2 Image

You just need to choose the Image you want to show in this setting and Crop the size to match your page.

1.3 Hover Image

You need to tick the Display Hover Image option first in order to use this feature. Then choose an image you want to show after hovering this element and crop the suitable size to fit with your website or your desired result.

2. Design

2.1 Image

Width/Max width/Height: You can set the width and height for the image here.
Image fit: Used to specify how an <img> should be resized to fit its container. This property tells the content to fill the container in a variety of ways, such as “preserve that aspect ratio” or “stretch up and take up as much space as possible”.
You can also set Opacity, CSS Filter, Box Shadow, Border, and Border Radius for both Normal and Hover modes.