Premium Image Layers widget

Intro

Premium Image Layers widget allows you to place multiple interactive images, lottie animation or text on top of each other. The layers can then be animated as the user scrolls through your page or moving the mouse over them.

Animations are best previewed live, visit the demo page to see the image layers in action.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Elementor Image Layers Widget

Key Features – Elementor Image Layers Widget

• Layers
• Container

1. Layer

To add a new image layer, click on the Add item button.

• Media Type:
  • Upload an image from the WordPress media library.
  • Paste the link for a Lottie Animations JSON code.
  • Type your text in the text input box.
• Image Option:
  • Image size: You can select between:
    • Thumbnail – 150 x 150
    • Medium – 300 x 300
    • Medium Large – 768 x 0
    • Large – 1024 x 1024
    • Full
    • Custom -You can crop the original image size to any custom size. You can also set a single value for the height or width in order to keep the original size ratio.

• Offset: Adjust the Horizontal and Vertical offset position of the image in pixels or %.
• Width: Adjust the width of the image. This setting will override the image size option. If the image is smaller than the selected width, the image will be stretched.

NEW: Once you have added an image, you can position and resize image layers from the preview area.

• Text Options: Available only with media type text option.
  • Text Color: Pick a color for text font.
  • Text Hover Color: Pick a color for text on hover state
  • Typography: Customize text fonts.
  • Text Shadow: Adjust text shadow using the following controls:
    • Color
    • Horizontal Position
    • Vertical Position
    • Blur
• Blend Mode: Set how a background text should blend with the content of the title and background.
• Link: Add a link to the image. Enter a link or select from a list of existing pages. External links can also have a nofollow and be opened in a new window.
• Rotate: Enable or disable image rotation and enter the degrees of the rotation, from 0 to 180.
• Animation: Enable or disable animation. When enabled, you can select from the following entrance animations which will be used when the page is first loaded. You can select an animation to preview it in the editor before applying the changes.
  • Fading
    • Fade In
    • Fade In Down
    • Fade In Left
    • Fade In Right
    • Fade In Up
  • Zooming
    • Zoom In
    • Zoom In Down
    • Zoom In Left
    • Zoom In Right
    • Zoom In Up
  • Bouncing
    • Bounce In
    • Bounce In Down
    • Bounce In Left
    • Bounce In Right
    • Bounce In Up
  • Sliding
    • Slide In
    • Slide In Down
    • Slide In Left
    • Slide In Right
    • Slide In Up
  • Rotating
    • Rotate In
    • Rotate In Down Left
    • Rotate In Down Right
    • Rotate in Up Left
    • Rotate in Up Right
  • Attention Seekers
    • Bounce
    • Flash
    • Pulse
    • Rubber Band
    • Shake
    • Head shake
    • Swing
    • Tada
    • Wobble
    • Jello
  • Light Speed
    • Light Speed In
  • Specials
    • Roll In
• Animation Duration: Select between normal, fast and slow.
• Animation Delay: Add an animation delay by entering the number of seconds.
• Mousemove Interactivity: Enable or disable mousemove interaction. If enabled, the following option becomes available:
• Interactivity Style: Select between Mouse Parallax or Tilt.
  • Mouse Parallax has additional options:
    • Reverse Direction: Reverse effect with mouse.
    • Back To Initial Position: Enable this to get back to initial position when mouse leaves the widget.
    • Rate: You can select the movement rate for the image.

• Scroll Effects: Enable or disable scroll effects. If enabled, you can enable one or more of the following effects:
  • Scroll Fade
  • Vertical Parallax
  • Horizontal Parallax
  • Blur
  • Rotate
  • Scale
  • Gray Scale
• Floating Effects: Enable or disable floating effects. If enabled, you can enable one or more of the following effects and can adjust their settings.
  • Translate
  • Rotate
  • Opacity
• Mask Image Shape: Enable the mask image shape option.
  • Mask Image: Upload the image, needs to be in PNG format.
  • Mask Size: Contain or Cover the current image.
  • Mask Position: Select the mask position on the image.
• Z-index: Adjusting the z-index can help you position images below or above other elements on your page.
• CSS Classes: Adding additional CSS classes allows you to customize your images further. Separate classes with spaces.
• Apply Scroll Effects On: Apply the scroll effects on different device sizes. Desktop, Tablet and Mobile are active by default. Click on the X next to the item to remove it.
• Disable Floating Effects On Safari: You can disable Floating Effects on Safari browser to prevent any layout breaks that can result from compatibility between Safari browser and the modern CSS used to create the floating animations

2. Container

• Minimum Height: Adjust the minimum height to fit your images. Set the height using pixels, em or vh.
• Overflow: Adjust the content overflow to fit your needs and your images. Select between:
  • Auto
  • Visible
  • Hidden
  • Scroll

---

Style

1. Image

• Background Color: Select a background color behind the image. This may be useful for transparent images.
• Border Type: Select between the following border types, as well as the width of the border on each side of the tab:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border radius: Can be declared using pixels, % or em. The higher the number, the more circular corners. You can also select the border color from the color picker.
• Box Shadow: You can add a shadow around the tab with this option. Select the color and the following settings:
  • Horizontal position
  • Vertical position
  • Blur
  • Spread
  • Position: Outline or Inset
• Margin and Padding:
  • Margin is the space between the image and the main container. Changing the margin will change the image position.
  • Padding is the space between the image and the image border. Changing the padding will change the image size.
• The margin and padding can be declared using pixels, % or em. You can link the values together, or only change the value for one side of the image.

2. Container

The container has the same settings as the images, but the settings are applied to the outer container.