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.
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.
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.
Panel Hover Effect
This e-commerce panel shows the user a product shot, and basic information, and then provides a purchase CTA on hover.
True Paradise on Earth
An example of a blog panel. Simple, elegant. Paradise.
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.