Ideas for Proximity Feedback with Progressive Hover Effects

Today we’d like to share some subtle proximity feedback ideas with you. We’re exploring a progressive hover effect which triggers not just when we are hovering an element but progressively, when we come close to it. There are several interesting use cases for this kind of effect and today we wanted to showcase some of them.

The demos are kindly sponsored by monday.com: Project & Time Management has never been easier. If you would like to sponsor one of our demos, find out more here.

Attention: This is a progressive hover effect meant to enhance the user experience on desktops. Needless to say that this is not going to work on touch devices in this way.

We’ve created a couple of demos where we explore the effect. The first demo is a form that highlights required (or invalid) input fields when the user moves close to the submit button. Like that, one does not need to click/submit the form and get feedback on problematic inputs; feedback is provided prior to that but not while the user is typing which can be a bit annoying. It’s a bit like trying to predict what the user will do next which is made possible by the mouse movement, i.e. seeing where the user is directing his mouse towards.

feedback

The second demo shows a mockup of a gallery. Here we do something progressively to the previous and next items before we hover them. We also enlarge a plus icon when coming closer to it, indicating that there’s more to see when it’s clicked.

The third demo shows a search concept where the search input gets progressively revealed while the placeholder text disappears.

feedback3

The fourth demo progressively slides a menu from the right side when coming closer to the edge and the fifth demo shows an example of a placeholder text effect. Demo 6 explores some image effects and the last demo shows how this concept can be used on icons, links and buttons to create interesting effects like making a heart beat faster the closer one moves to it:

feedback7

We hope you enjoyed these little effects and find them inspirational!

References and Credits

Ideas for Proximity Feedback with Progressive Hover Effects was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants