Image Overlays
This pattern uses card markup. By adding particular classes, you can set the content to overlap the media, which is useful for hero image boxes. Because we use an actual image (as opposed to a background image) the image will resize keeping its aspect ratio.
The basic classes are:
overlay: text will overlay the image on all screens.overlay-md-up: text will overlay the image on all screens larger than 640px.overlay-lg-up: text will overlay the image on all screens larger than 1024px.overlay-xl-up: text will overlay the image on all screens larger than 1280px.
If one of the size-specific classes is used, layout will default to a basic card on smaller screens.
This examples uses the following classes: overlay-md-up justify-bottom align-center. Additional custom CSS will usually be necessary to address issues such as padding, gutters, color, etc.
This is the Headline
Hendrerit cillum sapien, leo, harum quibusdam primis senectus iste, ultrices, esse id cupiditate nunc assumenda quam, netus totam. Hendrerit cillum sapien, leo, harum quibusdam primis senectus iste, ultrices, esse id cupiditate nunc assumenda quam, netus totam.
When the overlay is in effect, the following classes control various layout properties:
justify-center: text will overlay the image centered vertically.justify-bottom: text will overlay the image at the bottom.align-center: text will overlay the image centered horizontally.