Destination Photo Hero Template
Capture your audience's imagination with a breathtaking, full-screen hero image of an idyllic destination.
This template is designed to create an immediate emotional connection, inspiring visitors to explore travel packages or book their next vacation.
About the Destination Photo Hero
For travel and hospitality brands, selling the dream is key. This hero section does just that by putting a beautiful, high-quality destination photo front and center. By filling the entire screen, it immerses the user in the experience before they've even started to read. It's a highly effective way to create a "wow" moment and entice users to learn more.
Features
- Immersive Full-Screen View: The hero fills the entire viewport on load, creating maximum impact.
- Photography-Focused: Designed to showcase a stunning landscape or destination photo.
- Legible Text Overlay: A subtle gradient overlay ensures the headline and call-to-action are clear and readable.
- Inspiring CTA: The button is designed to prompt exploration and booking actions.
Code Breakdown
This component is split into CSS for your site's head and HTML for the body.
The full-screen effect is achieved on the main section element by setting min-height to 100vh (100% of the viewport height). Its position is set to relative. A ::before pseudo-element is used to apply a gradient overlay, which improves text readability.
The content container is centered vertically and horizontally using Flexbox (with display: flex and its alignment properties). The background image itself is applied via the background-image property in the CSS, where background-size: cover ensures it always fills the container attractively. The content div has a higher z-index to make sure it appears on top of the overlay.