SectionsBox
Caption Mode
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.
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.
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.
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.
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
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
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.
SectionsBOX
/ Think it. Make It.