How To Use The Image Stack Widget By Atomic Addons

The Image Stack widget by Atomic Addons shows a row of small round images or icons that overlap, like the avatars of a team or a group of happy customers. When a visitor points at the row it spreads out, and each item can show a tooltip and link somewhere. This guide covers adding the widget, building the items and setting up the hover animations.

Enable the Image Stack Widget

Image Stack is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Image Stack. You can also open the Creative category.

4. 4

   Turn the Image Stack widget on.

5. 5

   Click Save Settings.

Add the Image Stack Widget

Image Stack works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Image Stack. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

It starts with four placeholder images, 56px across, each overlapping the one before it by 20px and ringed in white.

Image Stack

Content → Image Stack holds the list of items. Click an item to open it. Its settings are split over three tabs. On the Content tab:

1. 1

   Media Type: Image (the default) or Icon.

2. 2

   Image: Image items: the picture, cropped to fill the circle.

3. 3

   Icon: Icon items: an icon from the library or an SVG you upload, a star by default.

4. 4

   Link: Where the item goes when clicked. Optional; it accepts dynamic tags.

On the Tooltip tab:

1. 1

   Text: A tooltip shown while the pointer is over the item, such as a name. It also becomes the image’s alternative text and the item’s name in the list.

2. 2

   Placement: Where the tooltip opens: Top (the default), Bottom, Left or Right.

The Style tab colors this one item: its Border Color and, for icon items, the icon Color and background. These override the colors set for all items on the widget’s Style tab.

Below the list:

1. 1

   Image Size: Which image size WordPress serves, Medium by default, plenty for small circles.

2. 2

   Alignment: Left, center (the default) or right alignment of the row, per screen size.

Stack Animations

The hover movement is set on the Style tab, in the Stack Animations section. It has two tabs.

Item Hover moves the single item under the pointer. Each popover is off until you open it:

1. 1

   Translate: Translate X and Translate Y shift the item sideways or up and down, −100 to 100px. A Translate Y of −10 lifts the item.

2. 2

   Rotate: Rotate X, Rotate Y and Rotate Z turn it, −180 to 180 degrees.

3. 3

   Scale: Scale X and Scale Y enlarge or shrink it, 0 to 10, where 1 is the normal size.

4. 4

   Skew: Skew X and Skew Y slant it.

5. 5

   Transition: Duration (ms), 300 by default, Delay (ms) and Easing, ease-out by default. Easing takes any CSS easing, such as linear or a cubic-bezier() value.

Stack Hover moves every item while the pointer is anywhere over the row, on top of the fan-out that removes the overlap: Translate (X and Y) and Rotate (X, Y and Z), with the same ranges as above.

Style the Image Stack

The rest of the Style tab:

• Items — the Normal tab sets the icon color, background (for icon items and around transparent images), border (3px solid white by default), border radius (round by default), Item Size, Icon Size, Spacing between items, Stack Spacing (how far each item overlaps the one before it) and a box shadow. The Hover tab has the icon color, background, border color and shadow on hover.
• Tooltip — width, text alignment, text color, arrow color, background, border, radius, padding, typography and shadow.