Premium Image Layers widget

Intro

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

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

Elementor Image Layers

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

Elementor Image Layers Widget
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.
  • 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.
Elementor Image Layers Widget General Options
Elementor Image Layers Widget General Options
  • 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.

Offset Options for Elementor Image Layers Widget
Offset Options for Elementor Image Layers Widget
  • 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.
Layer Settings for Elementor Image Layers Widget
Layer Settings for Elementor Image Layers Widget
  • 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
  • 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.
Available Effects for Elementor Images Layers Widget
Available Effects for Elementor Images Layers Widget

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
Elementor Image Layers Container Settings
Elementor Image Layers Container Settings

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.
Elementor Image Layers Image Style
Elementor Image Layers Image Style

2. Container

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

Elementor Image Layers Container Style
Elementor Image Layers Container Style
Elementor Image Layers Show Container Style
Basic example where a background color, border and box shadow has been to the container below two transparent image layers

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.