Guided Notes
W3.CSS: Images, Effects & Widgets
Images, display containers, animations, effects, modals, progress bars, tooltips, slideshows, and building a full page.
Images and display containers
Slide 1 / 5w3-image — a responsive image (max-width: 100%, height auto). w3-circle, w3-round, w3-border, w3-card — shapes and frames. w3-opacity, w3-grayscale, w3-sepia — filters; add w3-hover-opacity-off or w3-hover-grayscale for hover effects.
w3-display-container makes a positioning parent; children with w3-display-topleft, w3-display-middle, w3-display-bottomright (and more) are placed on top of it — perfect for text over a hero image.
