Customize your galleries thumbnails for your Fluid Infinity gallery. Within the Thumbnails section in the Container widget, you can control the thumbnail settings, height, effects and more.
Align the title and description of each thumbnail to the left, center or right of the thumbnail. Select one of the dropdown options to apply to all thumbnails within your gallery.
Select a pre-made animation to occur when a thumbnail is hovered over. From these options, the title and description of your thumbnails can either move in or out of the thumbnails container.
Text moves into view on thumbnail:
The space between the title and description is the area below the title and above the description. Use this area to add vertical spacing between the title and description within the textbox.
Use the icon dropdown area to apply an icon to each thumbnail included in your gallery. Then, further customize the icons size, position, spacing and animation for each thumbnail in one place.
Determine the size (in pixels) of your thumbnails icon. This value will be used for all breakpoints so it would be best if not created too large to accommodate for smaller breakpoints.
Select from the position drop-down where your icon will be placed in reference to each thumbnails container. From the drop-down, you have the option to align your icon to the center, top and bottom of each thumbnail.
Select a pre-made animation to add to your icon when the thumbnail has been hovered over. These animations are independent of the animations given to the thumbnails using the text animation options found within the Container widget.
Icon ends in view on thumbnail:
Effects applied to your thumbnails once they are hovered over are mastered through the Hover Effect dropdown area. Use this section to customize the setting for the overlay, timing and scaling of each thumbnails effects.
Control the duration (in seconds) of your thumbnails transitions once the thumbnail has been hovered over. Fast transitions will use smaller numbers like .2 and slower transitions will use larger numbers like 2.
The overlay is a cover over your thumbnail when hovered. Use the Overlay section to change the color, blending filter, and the opacity of the overlay when normal and hovered.
The scale of your image will shift when hovered based on the value you input into the Scale on Hover area. If you would like your image to scale down, use values less than 1. If you would like your image to scale up, use values greater than 1. For instance, if you would like your image to scale up 200% or 2x its loaded size, input 2 into the scale area.
Methods & Assigning
Upon load of the page and every load of additional items to the gallery, there is a transition that can be customized through the Sorting Animation area. Use the following areas to create smooth transitions as thumbnails are added to your gallery.
Input (in seconds) how long your gallery sorting animation should be and the delay of each item as it is added to the page.
Transform each thumbnail using rotation, scale and directional values as each thumbnail comes into view. Each value represents the positioning and orientation of each thumbnail upon load of page. For instance if you would like your thumnails to scale in from 200% and rotate 45 degrees then you would input 45 into Rotation and 2 into scale.