Image

TheGem image is an extended version of simple image widget, bringing you additional styles and style settings to insert really attractive images in a quick and simple way.

Check this demo page showing different TheGem image styles:

https://codex-themes.com/thegem/elements/styled-images/

Note: all this styles can be easily customized to meet your individual design needs. No coding needed.

You can find “Image” element in editing panel of Elementor in “TheGem Elements” group

Content Tab

Layout

Skin: TheGem comes with 13 style presets for images which you can select in this select box.

Content

Here you can select the image to be inserted. You can select an image from Media Library or upload a new image. Once selected you can then select an image size to be inserted (the size is also customizable in Style tab).
You can also set a link for the image:

• Media File: click on image will open the original image size. Here you have an option to activate “Lightbox” setting in case you wish that the original image opens in a lightbox (fancy box).
• Custom URL: specify any custom URL for the image link
• None: disable click on image

Options

Activate or disable lazy loading animation effect for the image.

Style Tab

Image Style

Customization options for the image appearance. You can set an image size, image position and a bunch of other options. In case you have activated an image link in Content tab -> Content, here you can also customize the hover effect in “Hover” tab. You can also specify, if you wish to show icon on hover, select this icon and customize its appearance

Container Style

Various settings to customize the appearance of image container. Each image is situated inside the container; here you can specify border, radius, paddings, background of the container.