

Hover.css – A collection of CSS3-powered hover effects - ianlunn
http://ianlunn.github.io/Hover/

======
taf2
Is this just animate.css
([https://daneden.me/animate/](https://daneden.me/animate/)) rebranded?

~~~
Taurenking
Yep thought so. Even though some effects are quite different

------
gopher1
Unfortunately, hover effects are becoming less important to me because of how
awkward they are on touch devices.

~~~
minimaxir
Worst case, you can disable CSS animations on mobile devices via media
queries.

------
epmatsw
Using a color besides grey on white would be nice. The lack of contrast makes
some of the effects really difficult to see, especially the Speech Bubble
ones.

------
bzelip
My work monitors are crappy, rendering speech bubbles invisible. I'll look
forward to checking this out on my own machine though. Checked out your
personal site from here, nice work on Sequence.js!
([http://ianlunn.co.uk/articles/sequence-js-
launch/](http://ianlunn.co.uk/articles/sequence-js-launch/))

~~~
ianlunn
Thanks. Will up the contrast on the buttons this evening.

------
jrochkind1
Those are really nicely done effects, and I could see finding a use for some
of the effects -- but not triggered on hover, I've pretty much given up on
anything triggered on hover, because of need to support touch.

~~~
dredmorbius
There's still a lot of desktop systems out there. And anything you trigger on
hover can be triggered on other pseudo selectors (active, selected).

I've found hover effects to be really useful on a client-side basis -- I do a
lot of restyling of websites to improve readability and usability. One
modification I've made is an asymmetrically timed resizing of edit dialogs in
the case of Diaspora. One second after entry, the dialog expands in size and
gets a subtle border. The border will fade after 20s, indicating that the
dialog will shrink shortly, the dialog itself after 30s.

This gives a responsive but not jittery design with a bit of hysteresis and
signaling.

Others are the emphasis given to tabs and other controls on this subreddit:
[http://www.reddit.com/r/dredmorbius](http://www.reddit.com/r/dredmorbius)
(hover over the post and comment controls), or submit button.

Excessive animation can be annoying, but with the right touch, it's a nice
usability enhancement.

~~~
jrochkind1
I like the dialog expanding thing -- but that's not on hover over the text
box, it's on click/touch/select/entry into the text box, right? Or you really
mean hover? It seems to me it'd be annoying on hover, but maybe I'd have to
see it.

~~~
dredmorbius
On hover, with a 1s delay to expand. In practice that means the window usually
expands as you start writing into it. And it's hard to trigger by accident.

I haven't tried on active yet, but suspect that that would not persist after I
released the mouse button. With hover. so long as the mouse stays over the
textarea and surrounding frame, it remains expanded.

I've posted code:

[http://www.reddit.com/r/dredmorbius/comments/1spr7a/asymmetr...](http://www.reddit.com/r/dredmorbius/comments/1spr7a/asymmetric_css_transition_timings_and_other_silly/)

(see the last code sample there).

------
elwell
The page curl doesn't look good enough to me, at least with those colors.

------
ahugon
These are handy! Thanks for sharing!

