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 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.