Discover the best hero-image websites created by professional designers. Get inspired and start planning your perfect hero-image web design today!

Welcome to daily interaction #100!

Thank you for checking out, cloning, or commenting on my daily interactions! They are really fun to do!

This demo showcases a parallax hero image on page scroll. There is more information as you scroll down as well :).

To view more daily interactions and premium content visit:
https://www.webdevforyou.com/

WebDev for You - Daily Interaction #100

WebDev For You - Daily Interaction #100

Article experiment containing show/hide navigation, full cover hero artwork, reveal images, sticky captions/credits, and hover video concept. 
*** Desktop only ***

v3 xBrand Article Framework

xbrand-article-framework-v03

Hello, my Webflow friends! Got a new clone to share with you all!

I wanted to make a project that touched on the medical field (I've been an X-ray tech for 15 years!). Had this vision of having a hero image that breaks the heading and once I found this dashing lad, I was in love lol.

Really love how the color palette and headings give a modern, relaxing feel. Makes the proposed chiropractic office come off as more high-end and a place where I'd receive excellent care and service.

Of course, I can never miss the chance to add terrible puns and dad jokes to my personal projects lol.

This project was made using some of my favorite new tools. For the design, I mainly used a Figma UI kit called "Untitled UI", and then built utilizing the Relume Library. Both are FANTASTIC tools to help your productivity. 

Hope you enjoy the site! Feel free to clone it and use it as you like.

(Images were taken from pexels.com and unsplash.com)
(Icons from Unititled UI and Cabana).

chiro

chiro-medical

You have three seconds to make a great first impression on the web. In this week’s Webflow workshop, we showed you how to create a more engaging hero row with a blur effect. We focused on using a CSS3 blur filter, element structure, and positioning.

Blur Hero Image Presentation

Blur Section of Hero Image - Livestream

Veza Digital

You can apply this method to cards, hero sections, background images, you name it!

Make sure to grab, edit, and copy that header code embedded in the page :)

Glassmorphism

Customizable Glassmorphism Cloneable

Campaign page that highlights all the people that meant something for club BIRD in Rotterdam, the Netherlands.

Resources used:
Hero images: 
https://webflow.com/website/TRICKS-Bubbles
Confetti:
https://github.com/catdad/canvas-confetti

People of BIRD

Hi everyone!

I wanted to share the following project as our fearless community leader, Nelson, will be presenting how to blur a section of a hero image.

Also, this affect was also answered slightly differently at https://forum.webflow.com/t/want-to-blur-div-block-above-hero-image/54544

Blur Hero Image

Blur Section of Hero Imag

keelvarTest

Keelvar Dashboard Animation

Simple & versatile hero section featuring a background with an overlay.

Welcome to the Universal UI project by Veza Digital!

Every day, we're releasing new elements from our work-in-progress called "The Universal UI". 

The problem that we always have with UI kits is that they're too specific (not easy to use for different types of businesses), and that while often beautiful, they have a number of custom-designed images that makes replicating the beauty of the kit a time consuming process at best.

That being said, this is going to be a completely free, comprehensive UI kit that is made to be used for any type of business, and is as easy to edit/clone elements as a UI kit should be.

Hero 02

Hero Section (Background Image) Cloneable

Another NHS GP surgery website. Uses a faded hero image at the top, with the practice contact information front & centre. Some feedback from patients was that the main thing they want when they visit the site - especially on mobile - was the phone number of the surgery, so this is the first thing they see.

grassendale

Grassendale Medical Practice

Cryptomi is a community for crypto developers to network, find jobs, and improve their skills. This landing page was designed to have a fun but professional look with a space theme. Includes basic hover animations and a really nice orbiting planets lottie animation on the hero. Image assets are customized to the brand's color palette to ensure continuity of branding.

Cryptomi

This site was created for the artist group, Icebox Collective. This is a early version of the site and is still in development. I created the hero image illustration and styled all of the content on the site.

Icebox Collective

icebox-collective

Website build with video as hero image on front page.

Tech Ltd

tech-ltd

I created this page as an online presence for my artwork (sketching and painting), with a hero image on the homepage to entice visitors to see more, and a minimalist style throughout.