Overlay

Basic

To create a position context, add the .overlay class to a container element around an image. Add the .overlay-panel class to a child element to create the actual overlay panel.

Toggle Overlay On Hover

By default, the overlay is always visible. To hide the overlay and display it on hover, add the .overlay-hover class to the overlay container.

Overlay Background

To give the overlay a background just add the .overlay-background class to the overlay container.

Overlay Anchor

To use the entire overlay as a link, just place an <a> element inside the overlay container and add the .overlay-anchor.

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Overlay Top

Overlay Bottom

Overlay Right

Overlay Fade

Add this class to the overlay panel or image to fade it in.

Overlay Scale

Add this class to the image to scale it up.

Overlay Spin

Add this class to the image to slightly rotate it to the right.

Overlay Grayscale

Add this class to the image to desaturate it and color it on hover.

Overlay Slide Top

Add this class to the overlay panel to slide it in from the top.

Overlay Slide Bottom

Add this class to the overlay panel to slide it in from the bottom.

Overlay Slide Top

Add this class to the overlay panel to slide it in from the right.

Icons