Photography portfolio with fullscreen gallery and lightbox.
Hero elements (title, subtitle, buttons) appear in cascade with increasing delays. Guides visitor eye from top to bottom and creates cinematic effect.
animation: fadeUp 1s ease forwards + animation-delay Explore Scroll & Parallax →On hover, image zooms slightly and darkens while overlay with title and category slides from bottom. Invites user to explore without masking photo by default.
transform: scale(1.08) + filter: brightness(0.7) on :hover Explore Hover & Interactions →Image opens fullscreen with scale 0.9 to 1 and background fading in. Allows appreciating photo detail without leaving page.
opacity + transform: scale(0.9 → 1) transition 0.4s Explore Gallery & Media →On scroll, navigation bar changes from transparent to semi-opaque blurred background. Keeps nav readable on any content without masking background photo.
backdrop-filter: blur(20px) + background: rgba() Explore Glass & Morphism →Cards rise on hover with golden bar deploying at top. Double visual feedback: elevation confirms interactivity, bar identifies active section.
transform: translateY(-10px) + ::before scaleX(0 → 1) Explore Hover & Interactions →CSS grid with 3 columns and some images spanning 2 rows creates dynamic photo-magazine-inspired layout. Automatically adapts to mobile.
grid-template-columns: repeat(3, 1fr) + grid-row: span 2 Explore Cards & Layouts →