At An Event Apart in Washington DC 2013, Jenn Lukas walked through hover effects on the Web and how they can be used to enhance links. Here's my notes from her talk Hot Links!:
- We used to use Javascript to create hover effects by switching out images. Then Microsoft introduced the CSS pseudo-class to create hover effects. Now we can use CSS to do what we used Javascript for and more.
- Hover interactions can be used for good or bad like any other technology. There's examples of hovers being used effectively and poorly online. A hover is not bad by default.
- The essential hover: a simple color change or transition that indicates when something is actionable. You can smooth these hovers out with a transition fade CSS transition to make them appear more fluid.
- Hover actions can be made richer with rotation, border effects, or shifting elements around with different margins and and z-index. These kinds of hover effects provide a bit of surprise and delight. Aim for just the right nifty factor but don't overdo it. Choose wisely when you add hover effects not all of them are appropriate for each site and audience.
- The webkit-filter property allows you to adjust contrast, grayscale, hue rotations, and sepia values. You can switch these properties on hover. Along with filters CSS masks can be used to reveal parts of an image during a transition.
- Services like Readability allow you to take Web pages and move them into a more readable format. But sites can accomplish similar effects with a hover effect using something like the CSS invert property, which reverses color values. You can also use the blur property to fade out some text and put the focus on other parts of the site. Again be mindful where you use this effect. Its not appropriate everywhere.
- Don't forget about the focus pseudo-class. It's super easy to add focus but many of us forget. Define your focus right when you define your hovers. Focus helps keyboard and other indirect input users know where they are in an interface.
- Many touch based devices don't support hover actions. But some devices, like the Samsung Galaxy Note, allow hovering with a stylus. So it's not entirely true that there is no hover on mobile.
- To account for a lack of mouse hovers on lots of mobile devices, make sure your crucial information is visible on the screen. If it's not vital, you don't have to show it or put it behind a tap so people can access the information when they need it.
- But how do you know when to make this change? Touch is available on many different kinds of devices and we don't know how to detect whether touch is present. We don't have a perfect solution right now yet we need to keep experimenting.
- Hover effects can enhance experiences. Have fun and explore what's possible.