From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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.
These effects are awesome.Thank you for sharing them π
As usual.. impressing. Thanks a lot for your work, my rss feed can’t wait π
Thanks, awesome art
Once again, amazing stuffs… i’m jealous.. lol
Thanks codrops ! π
Muito legal! π
Amazing stuff as always. You always come up with something different and creative that inspires others a lot. Thank you Mary π
Amazing! π
Woah! This would be awesome as a wordpress plugin!
Anyways, awesome work man! (hit me up if you decide to do a wordpress version, i’d like to check that out ! )
Cheers!
Amaziiiiing! Thanks for sharing π
Thanks, super!
your awesome!
Thanks for sharing π
Oh Grate. I love it.
You are my all time favorite!. Awesome work.
Great as ever, of course.
But where do you get these awesome pictures?
Hi, thanks for that tuto.
I got a problem : I try to make a link inside the figcaption. My link apear but is inactive like the exemple.
Thank a lot for your help !
ps : i try the “Hera” exemple.
Magnifico! E muito gentil. Nao quer experimentar fazer suas modelos(templates)?
Sh t this is awesome.
You’re Awesome! π
Thank you.
Thanks for the share
we created video demo of this here – https://www.youtube.com/watch?v=1SCdPhrFskE
π
these effects are awesome thank you very moch for sharing
just awesome!! thnks so much
Waw very nice, thanks for sharing these effects with us!
Stunning!!! Love these, thank you for sharing they are very inspiring.
I like this hovers.
What a pitty, that you can’t use them with touch-sreen anymore …
really awesome. I was searching for this effect. Thanks
this is save me alot of time thanks π
This all effects are great.
I’ve found an issue with these hover effects. On a mac in the latest Chrome, during the transition period there is a funny text rendering issue. Fonts become slightly thinner during the transition and revert back to their original state once completed. It also messes up rendering as you move down the page, as the transitioned elements come into the viewport.
What I’m talking about can actually be seen in the demo however it is more prominent in the scenario I am working on.
Here’s what I mean
http://i.imgur.com/LWgUaNV.png
Is this an isolated issue and is there a solution?
I never wanted the set2 list to finish! they are amazing.. thanks for the inspiration and your time..
These are great, i’m just waiting to use them in a project.
Only one thing, is there a way of making them responsive?
Thanks a lot!, sharing wisdown with others, is the most precios choice a human can make.
really nice friend.
this is going to sound ridiculous, but how does one use these effects? I notice the download only comes with CSS, not any html.
The download includes two html files…
These effects are cool and trendy. Iβm just wondering, would it affect the loading time of my website? I want to try one of these soon on my next projects.
I’m noticing a few :: in the CSS. What does this do exactly? Example:
figure figcaption::before
Anyone out there who could explain me how to use any of these on real project. I am new in development and still learning. Thank you!
I’m noticing some weird issues when using Safari. Effects like Steve on set 2 have the image move up above the rest of the text. Chrome and FF seem to have the effects work flawlessly. Anyone have any idea on how to fix those issues on Safari? Other than that, great set of effects! π
First of all , just want to say your work is amazing! but i cant seem to get the hover effects to work on mobile or tablets? any suggestions?
There’s no haver effect on mobile devices.
Have u got any solution about Apple devices not showing hover effect?
Cheers
For some reason images look stretched out on mobile devices. Anyone else had the same problem?
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
Hi, Can I use for commercial ? Thanks.
Great work brother.. all these are too much innovative, so Thanks.. can i use it as commercial??
All these stuff are superb.. its too much hard to pick anyone..
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
Thank you for your observation…..
thanks for making this script and gave it for free ^_^