SectionsBox

Building Hover Captions

Sections Pro and Sections Box allow you to create any hover caption that you like.

Captions are made by simply adding any stacks that you like, positioning them with Sections Box and then applying animation effects to the box contents using the Sections Animate Elements child stacks.

This gives you total control to scratch build anything you like and get complete control of the content. Because nothing is prescribed by the stack, you can use all normal positioning, responsive sizing and visibility controls to ensure that your captions look good at all screen sizes.

No other caption solution allows this flexibility and control

Hand coding without any code

Just using simple stack settings, you can build layered animations of any complexity that you like, just as if they were hand coded. There are no restrictions on what your content should look like.

This power does mean that you need to build things in a modular way. If you prefer a super simple drop in approach without this level of customization and control then just use one of the many hover caption stacks that are available elsewhere.

How complex is it to do?

Is is only as complex as you want it to be. The first two examples below are super simple and yet very effective. In each one there is just an image stack and a Sections Box containing the caption. You then simply set up the animation you want for each one via the simple dropdown settings and its done.

Some of the examples below are more complex setups with many elements. They all however follow the same very simple principles, just build them up piece by piece to achieve the overall effect that you want.

Let your imagination run wild.

Two very simple examples

SectionsBOX

Reproducing the famous Codrops examples

Just to demonstrate the power of Sections Pro and Sections Box, I decided to reproduce a few of the hover caption examples from the popular Codrops Hover Effect Ideas demo. ( You can find the originals here http://tympanus.net/Development/HoverEffectIdeas/index.html ).

One thing to note is the improved responsive behaviour at very narrow widths of the Sections Pro version. This is a key benefit over using a premade hover stack. You can set up the contents just like you would for anything else on your page. For example, using the responsive resizing controls in Header Pro and Paragraph pro ensures that your text will always fit. This sort of detailed control is beyond the capability of a pre-made hover caption stack and is only possible with the modular approach we have with Sections Pro.