My Image

SectionsBox

Caption Mode

My Image

Float Content

Float a Sections Box anywhere relative to its parent Box or Sections Pro.

Very easy to setup, you can put just about anything anywhere be it a caption or anything else you like.

My Image

Size and Align

Sizing and aligning flowing content is easy thanks to Sections Box's simple controls.

Align the Box and its content for full control of what appears where.

My Image

Animate

Sections Box can be animated using Sections Pro animations. This allows you to create unlimited hover and a appearance effects.

Layering and Aligning Sections Box

Layering content using Sections Box is simple.

In these examples we simply have a Sections Pro stack into which is dropped a Stacks image (the placeholder that says "Parent"). This gives us the height in which to work. You could of course use background images and set the proportional size in the parent Sections or Sections Box stacks.

If you don't need advanced animations you can just use a Sections Box as the parent container and utilise its simple hover controls.

Using Sections Pro as the container gives you full access to its powerful animation child stack which really unleashes the potential of Sections Box to create hover captions, animations, diagrams and pretty much anything else you can dream up.

Simple ControlsJust build one step at a time

Here is the setup for the green floating box at the bottom.

My Image
Stacks Image 572

50% Parent Height.
Aligned: Top.
Content: Centered.

30% Parent Height.
Aligned: Bottom.
Content: Centered.

Width ControlPositioning horizontally

Here is the setup for the green floating box at the bottom left.

You can see how easy it is to create a custom layout.

My Image
Stacks Image 609

50% Parent Height.
50% Parent Width
Aligned: Top/Left.

50% Parent Height.
50% Parent Width
Aligned: Top/Right.

50% Parent Height.
50% Parent Width
Aligned: Bottom/Left.

50% Parent Height.
50% Parent Width
Aligned: Bottom/Right.

Add a hover AnimationUsing the Sections Pro animate child stack.

Remember: All Sections Pro animations are pure CSS and so are fast and silky smooth.
Javascript is only used to set up the classes on your elements.

Each Sections Box has a Box ID which we can use to target individual CSS animations using the Sections Pro animate child.

By simply applying a shift (translate) of 100% in various directions to each of our boxes we can immediately create a hover caption effect.

Just as a final flourish, we've added a 5th Sections Box set to 100% of the parent size with a slightly delayed scale animation.

Hover over the box to see it

Stacks Image 664

50% Parent Height.
50% Parent Width
Aligned: Top/Left.

50% Parent Height.
50% Parent Width
Aligned: Top/Right.

50% Parent Height.
50% Parent Width
Aligned: Bottom/Left.

50% Parent Height.
50% Parent Width
Aligned: Bottom/Right.

SectionsBOX

Hover Me

Simple Animation Setup

My Image

This is the Sections Pro animate child setup for the bottom left green box. Just three simple settings to make.

1. Select the ID of the box that we assigned in the Sections Box stack.

2. Set the animation to trigger when the Section is hovered.

3. Apply a vertical shift of 100% to the Box when hovered.

100% will shift the box down by its height and so it will just disappear from the bottom of the Section.

WOW!Just a few simple steps and we already have something not possible with any other stacks.

More Possibilities...

But this is only the beginning.....

Animations can be triggered when in view or on page load instead.

Think outside the BOX!! You can create more than just hover captions. Make useful and informative UI elements to enhance your site.

With Sections Box and Sections Pro animate, the possibilities are limitless.

Just as an example to get you started, I recreated the famous CoDrops hover caption examples. Use these as they are or modify them to your taste.

Happy Boxing.

HoverCAPTIONS

SectionsBOX

/ Think it. Make It.