Poster Component
Cover image container with aspect ratio, overlays, and hover effects. Requires a width, height, or aspect-ratio to render.
Notes
- Base class:
.poster. Default aspect ratio is 4/3.
- Place
<img> or <picture> inside. Missing or empty src shows "No image available".
- Use
data-content for custom overlay text on ::before, and data-content-hover for hover-only text.
- Images use
object-fit: cover by default. Empty poster shows a solid background.
Basic usage
Default (4/3)
Custom aspect ratio
Fixed size (w-50 h-40)
Placeholder (no image)
Empty poster
Empty src
![]()
No src attribute
![]()
Shapes
poster-rounded
poster-square
poster-pill
poster-fluid
poster-scoop
poster-beveled
Aspect ratio utilities
poster-1x1 (1:1)
poster-4x3 (4:3 default)
poster-3x4 (3:4)
poster-16x9 (16:9)
poster-9x16 (9:16)
poster-21x9 (21:9)
poster-3x1 (3:1 banner)
poster-2x1 (2:1), poster-1x2 (1:2)
poster-3x2 (3:2), poster-2x3 (2:3)
poster-4x5 (4:5), poster-5x4 (5:4)
poster-7x5 (7:5), poster-5x7 (5:7)
poster-9x21 (9:21), poster-1x3 (1:3)
Dynamic size (poster-*)
poster-10 (40px)
poster-20 (80px)
poster-30 (120px)
poster-40 (160px)
poster-50 (200px)
poster-60 (240px)
poster-80 (320px)
Layout
poster-full (100% width)
poster-flush (fill parent)
Hover effects — Zoom
poster-zoom-in
poster-zoom-out (initially zoomed)
Hover effects — Pan
poster-pan-start (left)
poster-pan-end (right)
poster-pan-top (up)
poster-pan-bottom (down)
Hover effects — Grayscale
poster-gray-in (turn gray on hover)
poster-gray-out (initially gray)
Hover effects — Brightness
poster-bright-in (brighten on hover)
poster-bright-out (dim on hover)
Hover effects — Blur
poster-blur-in (blur on hover)
poster-blur-out (initially blurred)
Hover effects — Overlay
poster-dark-in (dark overlay on hover)
poster-dark-out (initially dark overlay)
poster-light-in (light overlay on hover)
poster-light-out (initially light overlay)
Caption
poster-caption (bottom, hidden)
Caption
poster-caption-top (top, hidden)
Caption
poster-caption-center (center, hidden)
Caption
Center icons + bottom caption
Caption
Marker
Size + ratio combinations
poster-30 + poster-16x9
poster-40 + poster-1x1 + poster-pill
poster-30 + poster-16x9 + poster-rounded
Use cases