5 ms·

Hover.css – A collection of CSS3-powered hover effects

67 points by ianlunn 13y ago

epmatsw 13y ago
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.
taf2 13y ago
Is this just animate.css (https://daneden.me/animate/ https://daneden.me/animate/) rebranded?
- Taurenking 13y ago
  Yep thought so. Even though some effects are quite different
gopher1 13y ago
Unfortunately, hover effects are becoming less important to me because of how awkward they are on touch devices.
- minimaxir 13y ago
  Worst case, you can disable CSS animations on mobile devices via media queries.
- malandrew 13y ago
  I would like to see touch devices start using eyetracking via the camera to infer what you are looking at and enable "ongaze" effects, which would have to be much more subtle versions of onhover. Furthermore, if ongaze, offgaze effects existed, it would be important to allow the user to disable them systemwide (i.e. short-circuit ongaze so it is never trigger).
elwell 13y ago
The page curl doesn't look good enough to me, at least with those colors.
jrochkind1 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      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/asymmetric_css_transition_timings_and_other_silly/ http://www.reddit.com/r/dredmorbius/comments/1spr7a/asymmetr... (see the last code sample there).
bzelip 13y ago
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 13y ago
  Thanks. Will up the contrast on the buttons this evening.
ahugon 13y ago
These are handy! Thanks for sharing!

67 points by ianlunn 13y ago

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.

taf2 13y ago

Is this just animate.css (https://daneden.me/animate/ https://daneden.me/animate/) rebranded?

Taurenking 13y ago
Yep thought so. Even though some effects are quite different

gopher1 13y ago

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

minimaxir 13y ago
Worst case, you can disable CSS animations on mobile devices via media queries.
malandrew 13y ago
I would like to see touch devices start using eyetracking via the camera to infer what you are looking at and enable "ongaze" effects, which would have to be much more subtle versions of onhover. Furthermore, if ongaze, offgaze effects existed, it would be important to allow the user to disable them systemwide (i.e. short-circuit ongaze so it is never trigger).

elwell 13y ago

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

jrochkind1 13y ago

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 13y ago
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 13y ago
  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 13y ago
    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/asymmetric_css_transition_timings_and_other_silly/ http://www.reddit.com/r/dredmorbius/comments/1spr7a/asymmetr... (see the last code sample there).

bzelip 13y ago

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 13y ago
Thanks. Will up the contrast on the buttons this evening.

ahugon 13y ago

These are handy! Thanks for sharing!