Skip to main content

Creative and Development Inspiration 3: Hover Effects

Today’s list is a selection of mouse over / hover effects. These animations and transitions can make a massive difference between just another website, and a sleek user friendly interface that readers want to keep coming back to.

 

Tympanus Hover Effects

The first two links are from Tympanus. A brilliant site with hundreds of code snippets. I really recommend keeping an eye on this website, both as a developer, and a designer.

Each link has multiple examples within, and showcases different ways of animating the same element.

https://tympanus.net/Tutorials/CaptionHoverEffects/

https://tympanus.net/Development/HoverEffectIdeas/

 

UX Design Agency Info Panels

UX Design Agency have used hover effects brilliantly on the home page panels. A gentle zoom and reveal of essential information is really engaging.

https://ux-design.agency/

 

Product Card

This product card is very minimal, and shows the user exactly want they need to see. My only concern it is very JavaScript heavy, but I’m sure this could be rewritten to use plain CSS3.

https://codepen.io/virgilpana/pen/RNYQwB/

 

Direction Aware Hover

This piece of code is a bit old, going back to 2013, but is still relevant. As the user hovers over each panel, it moves across from the one before.

https://codepen.io/noeldelgado/details/pGwFx

 

Panel Hover Effect

This e-commerce panel shows the user a product shot, and basic information, and then provides a purchase CTA on hover.

http://cssdeck.com/labs/l6pzd5vm

 

True Paradise on Earth

An example of a blog panel. Simple, elegant. Paradise.

http://www.louistiti.fr/demo/Concept-Design/Carte-Article-UI/

 

One thought it that designers and developers need to remember not all devices have hover, specially as large screen touch devices are getting more traction in the consumer market. Any information that is shown on hover, needs to be accessible for these other users as well.

Leave a Reply

Your email address will not be published. Required fields are marked *