Some More Subtle Hover Effect Ideas

A second set of styles was added to the collection of subtle hover effect ideas. The old set was updated and we've added some fresh effects with various transitions.
By in News & Updates on
HoverEffectsUpdated
View demo Download Source

From our sponsor: Supercharge your marketing across design, automations, analytics, and more, using our marketing smarts.

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 also corrected some small issues; thanks to everybody for the valueable feedback in the comments and the GitHub repo.

Demos

We’ve added a second set of effects:

The images in the demos are from Unsplash and the icons used in the first set are from the Feather icon set by Cole Bemis.

Find this project on Github

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 51

Comments are closed.

  1. hi, great stuff, i have a box with text an icon and a button, just need to hover the colors, how can i do that?? help im kind a lost here

  3. Great work brother.. all these are too much innovative, so Thanks.. can i use it as commercial??

  5. Thanks very much for these ideas, I really do like them and am using Zoe.

    I’ve found that on mobile devices, in portrait orientation that the image is stretched vertically and I found the reason why. On line 40 of set1.css for .grid figure img the min-height is set to 100% to I changed this to auto so as to allow for the aspect ration to be maintained.


    .grid figure img {
    position: relative;
    display: block;
    // min-height: 100%;
    height: auto;
    max-width: 100%;
    opacity: 0.8;
    }</code