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.

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

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.

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Overlay Background

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

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Overlay Icon

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

...

Overlay Image

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

... ...

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 Positon

Overlay Top

...

Overlay Top

Overlay Bottom

...

Overlay Bottom

Overlay Left

...

Overlay Left

Overlay Right

...

Overlay Right

Overlay Transition

Overlay Fade

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

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Overlay Scale

Add this class to the image to scale it up.

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Overlay Spin

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

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Overlay Grayscale

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

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Overlay Slide Top

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

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Overlay Slide Bottom

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

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Overlay Slide Top

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

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Overlay Slide Top

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

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

More Examples

Animation

...

Title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Vertical Align

...

Icons

...