Image Component Overlay [approved]
This page is a demo utilizing the default image overlay feature in Atlas with an innovation component to manipulate the CSS of the overlay. There are no external scripts or coding, ONLY CSS.
❌ Using Atlas As-Is
The images in this container have NOT been manipulated by CSS and this is the default styling of Atlas.
✅ Using an Innovation Component
This responsive container has an id of "custom-image-overlays". The images in this container have been manipulated by CSS in the innovation component at the bottom of this page. Only images in a container with this id are affected.
What has been done?
Padding was given to the figcaption container, the overlay opacity has been raised, the font size has been adjusted to the Atlas X-Large size, and hover transitions were added.
Using an Innovation Component (Continued)
This responsive container has an id of "custom-image-transparent". The images in this container are transparent. This allows a user to use different colors and backgrounds (or not use them at all) on the image container. Only images in a container with this id are affected. The images in this container have been manipulated by CSS in the innovation component at the bottom of this page.