Templates Travel

Top 7 key effects

Travel site with destinations, galleries and reservations.

Hero Particles

Where: Hero section (background)

Orange and turquoise particles float upward in the hero. Evokes travel and movement, adding life to static background image.

animation: float 15s infinite + JS createElement dynamique Explore Atmosphere →

Destination Card Hover

Where: Destinations section + Offers

Cards rise and image zooms slightly on hover. Double feedback inviting clicks and simulating excitement of discovering new destination.

transform: translateY(-8px) + img scale(1.1) on :hover Explore Hover & Interactions →
Glass

Glassmorphism Overlay

Where: Hero stats + Nav on scroll

Hero stats and nav use blurred semi-transparent background. Allows readable text over landscape photos without hiding them.

backdrop-filter: blur(20px) + background: rgba() + border Explore Glass & Morphism →
Nav Link

Gradient Underline Nav

Where: Navigation (links)

Orange-turquoise gradient line expands under each link on hover. Elegant visual feedback guiding navigation without disrupting menu reading.

::after width: 0 → 100% + background: linear-gradient() Explore Navigation & UI →

Hero Image Slider

Where: Hero section (background)

Hero background image changes automatically with fade transition. Shows multiple destinations without visitor interaction.

animation: fadeInUp 0.8s ease-out + CSS transitions Explore Gallery & Media →
Type

Type Card Interactive

Where: Travel Types section

Travel type cards (adventure, luxury, culture) rise with colored icon change. Makes travel type selection fun and engaging.

transform: translateY(-8px) + ::before gradient + icon scale(1.1) Explore Cards & Layouts →
150+destinations

Animated Stats

Where: Hero (statistics banner)

Key numbers (destinations, travelers, rating) appear with fade animation. Brings credibility and trust from first screen.

animation: fadeInUp 0.8s ease-out 0.3s backwards Explore Data & Visualization →