Overlay

Basic

To display an basic overlay you can add the .overlay-box class. Add the .overlay-description class to a child element to create the overlay description panel.

Contrary to popular belief

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy

Toggle overlay on hover

To apply an toggle as an overlay, add the .overlay-hover class to an overlay container.

Contrary to popular belief

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy

Overlay image

To apply an image as an overlay, add the .overlay-image class to an <img> element with the .overlay-panel class.

Overlay inner effect on hover with icon

To display an icon you can add the .effect-inner-effect class and animate to add class .overlay to the overlay panel.

Overlay icon-effect on hover with icon

To display an icon you can add the .icon-effect class and animate to add class .overlay to the overlay panel.

Overlay slide top on hover with icon

To display an icon you can add the .effect-top-bottom class and animate to add class .overlay to the overlay panel.

Overlay top

Top Overlay

Overlay bottom

Bottom Overlay

Overlay left

Left Overlay

Overlay right

Right Overlay