Overlay

Create an image overlay, which comes in different styles.


Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
Note Use the Utility stack to add padding to the Overlay content.

Style modifiers

Primary ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.
Custom ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Overlay with icon

To display an overlay icon just add the Icon component inside the overlay.

Position

Bottom
Top
Center

Two images


Animation

Use the Overlay with transition and toggle on hover.
NOTEHere are just a few examples, all transitions from the Animation component can be used.
Fade
Slide Bottom
Slide Left
Slide Top