
Image Gallery
How it works
Image Gallery is made up of a repeater of images displayed as bars. On hover, the closest bar opens and nearby bars scale with it.
Images: repeater of images.
Style controls
Width: width of the gallery.
Height: height of the gallery.
Direction: flex direction of the bars: row, column, row reverse or column reverse.
Gap: space between bars.
Bar Styles controls
Bar Border: border of each bar.
Bar Box Shadow: box shadow of each bar.
Collapsed Width: width of a bar when it is not hovered. Used on row layouts.
Hover Width: width of nearby bars while another bar is open. Used on row layouts.
Collapsed Height: height of a bar when it is not hovered. Used on column layouts.
Hover Height: height of nearby bars while another bar is open. Used on column layouts.
Open Size: size of the hovered bar.
Animation controls
Influence: distance in pixels from the hovered bar that still affects nearby bars.
Blur: blur applied to bars that are not open.
Open Duration: duration of the open and close transition.
Easing: CSS easing of the open transition. You can choose Ease In Out, Ease Out, Ease In, Ease, Linear or Custom.
Custom easing: used when Easing is set to custom.
Disable in the Builder: if enabled, the animation will be disabled at the builder.
– Tamu








