Sliding Boxes

Sliding Boxes hide information behind a box. You can add color or an image to this boxes and when a user hovers their mouse over the image, the sliding box reveals the hidden information. With this Adobe Muse Widget you can increase users interaction on your website. You can organize information and distribute it among different boxes and reveal it with a smooth animation of a Sliding Box. 

This widget has many styling options. You can choose the font, size or padding of the title and the description. You can also add a title and a description to the overlay box. Apart from customizing the color, add an image or Font Awesome icons to the boxes. The widgets has a sliding effect and you can choose the direction it will follow.

MAIN FEATURES

– Resizable and mobile compatible widget.
– Add as many boxes as you want per page
– You can add image, text or icons to each box.
– Customize colors, font, sizes and more!
– Smooth hover effect.

HOW DOES IT WORK

1 – Add the widget into Muse workspace.
2 – Start selecting the text styles: color, size, font and padding.
3 – Play with all the setting options. Choose if you want icons or images and what to show.
4 – Set background colour and opacity values.
5 – Type the title and description you want to display in each box.
6 – Uncheck “DESIGN MODE ONLY (force overlay layer)” before publishing your website. This is only used to preview overlay layer.

NOTE: if you use too high title, picture or description in overlay layer, it will appear over main layer even when not triggered.

[button link=”https://responsive-muse.com/demos/widget-sliding-boxes/” color=”orange” size=”” stretch=”” type=”” shape=”” target=”_blank” title=”” gradient_colors=”|” gradient_hover_colors=”|” accent_color=”” accent_hover_color=”” bevel_color=”” border_width=”1px” icon=”” icon_divider=”yes” icon_position=”center” modal=”” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”center” class=”” id=””]PREVIEW[/button]