From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.
We’ve updated and added some more effects to the Hover Effect Ideas. The second set contains some fresh styles that include the Font Awesome icon font and SVG backgrounds for some effects. The structure of the demos was a fullscreen grid before, but now we’ve adjusted it to contain single rows of figures where it’s easier to see how an effect looks in its normal state and when hovering.
As in the previous set, we try to make the effects as smooth as possible, not using any transition on properties that affect layout or painting. But trying out new things (like we do with SVG in the second set), there could be some glitches in Firefox on Windows (tiny border of SVG shown).
Please note that the effects have been tested in the latest versions of modern browsers. They might not work as expected in older browsers; you’ll have to provide a suitable fallback if you’d like to support those.
Read the original and updated article here: Ideas for Subtle Hover Effects
We’ve added a second set of effects: