4 ms·

Hover.css – A collection of CSS3 powered hover effects

86 points by mcalmels 12y ago

Beltiras 12y ago
Amazing work. Incorporating in my css-bag-of-tricks, posthaste.
- petecooper 12y ago
  Out of interest, what else do you have stashed in that bag?
  - Beltiras 12y ago
    Nothing too fanciful, just a collection of links I found useful: https://github.com/blueimp/jQuery-File-Upload https://github.com/blueimp/jQuery-File-Upload http://www.creativebloq.com/responsive-design-tools-8134180 http://www.creativebloq.com/responsive-design-tools-8134180 http://www.cssmatic.com/border-radius http://www.cssmatic.com/border-radius http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/ http://tympanus.net/codrops/2013/11/07/css-overlay-technique... http://www.entheosweb.com/tutorials/css/borders.asp http://www.entheosweb.com/tutorials/css/borders.asp http://css3gen.com/text-shadow/ http://css3gen.com/text-shadow/ http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/ http://www.abeautifulsite.net/whipping-file-inputs-into-shap... http://ellekasai.github.io/purplecoat.js/ http://ellekasai.github.io/purplecoat.js/ (omitting reference material anyone and everyone already has on their bookmark bar) I don't get the downvotes. Can someone explain?
lukasm 12y ago
Dup https://news.ycombinator.com/item?id=7018240 https://news.ycombinator.com/item?id=7018240
stephen123 12y ago
Nice update.
pen2l 12y ago
There was an interesting comment made when this was last submitted: > 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. I never thought about it before this way, but it makes some sense. Are people completely giving up hover-on effects because of this? It'll probably make sites marginally faster to give up effects on hover... so that's 2 reasons to ditch hover-on effects already. Do there still exist good reasons to keep it?
- ianlunn 12y ago
  Hover still applies when a touch device is tapped but obviously if the element is a link the page is navigated away from and thus the effect isn't seen. Not all interactions navigate away from the page though so the effects are useful in those cases. And of course, desktop and other devices with cursor capabilities still make use of hover.
  - bioGrad 12y ago
    While it does still semi-work on mobile devices, frankly it is useless. Trying to trigger hover by tapping on the webpage is just frustrating and overall a bad user experience on mobile devices.
- Agathos 12y ago
  I always hit m.xkcd.com now, never the main site, even when I have a mouse. That hover text was always a pain.
  - 0942v8653 12y ago
    Now you can see the title-text by tap-holding on the image too.
- listic 12y ago
  I am pondering whether we could trigger nice hover effects with something else, e.g. gyroscope, on touch-enabled devices. E.g. I wish for the link text to change color when one moves a mouse (on non-touch-enabled devices) or turns the device around (on touch-enabled devices)
ehtd 12y ago
Nice effects
edent 12y ago
Works really well on Android using Samsung's S-Pen. Interesting to see if other mobile platforms can detect fingers hovering over the page.
sctb 12y ago
https://news.ycombinator.com/item?id=8854354 https://news.ycombinator.com/item?id=8854354

86 points by mcalmels 12y ago

Beltiras 12y ago

Amazing work. Incorporating in my css-bag-of-tricks, posthaste.

petecooper 12y ago
Out of interest, what else do you have stashed in that bag?
- Beltiras 12y ago
  Nothing too fanciful, just a collection of links I found useful: https://github.com/blueimp/jQuery-File-Upload https://github.com/blueimp/jQuery-File-Upload http://www.creativebloq.com/responsive-design-tools-8134180 http://www.creativebloq.com/responsive-design-tools-8134180 http://www.cssmatic.com/border-radius http://www.cssmatic.com/border-radius http://tympanus.net/codrops/2013/11/07/css-overlay-techniques/ http://tympanus.net/codrops/2013/11/07/css-overlay-technique... http://www.entheosweb.com/tutorials/css/borders.asp http://www.entheosweb.com/tutorials/css/borders.asp http://css3gen.com/text-shadow/ http://css3gen.com/text-shadow/ http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/ http://www.abeautifulsite.net/whipping-file-inputs-into-shap... http://ellekasai.github.io/purplecoat.js/ http://ellekasai.github.io/purplecoat.js/ (omitting reference material anyone and everyone already has on their bookmark bar) I don't get the downvotes. Can someone explain?

lukasm 12y ago

Dup https://news.ycombinator.com/item?id=7018240 https://news.ycombinator.com/item?id=7018240

stephen123 12y ago

Nice update.

pen2l 12y ago

There was an interesting comment made when this was last submitted: > 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. I never thought about it before this way, but it makes some sense. Are people completely giving up hover-on effects because of this? It'll probably make sites marginally faster to give up effects on hover... so that's 2 reasons to ditch hover-on effects already. Do there still exist good reasons to keep it?

ianlunn 12y ago
Hover still applies when a touch device is tapped but obviously if the element is a link the page is navigated away from and thus the effect isn't seen. Not all interactions navigate away from the page though so the effects are useful in those cases. And of course, desktop and other devices with cursor capabilities still make use of hover.
- bioGrad 12y ago
  While it does still semi-work on mobile devices, frankly it is useless. Trying to trigger hover by tapping on the webpage is just frustrating and overall a bad user experience on mobile devices.
Agathos 12y ago
I always hit m.xkcd.com now, never the main site, even when I have a mouse. That hover text was always a pain.
- 0942v8653 12y ago
  Now you can see the title-text by tap-holding on the image too.
listic 12y ago
I am pondering whether we could trigger nice hover effects with something else, e.g. gyroscope, on touch-enabled devices. E.g. I wish for the link text to change color when one moves a mouse (on non-touch-enabled devices) or turns the device around (on touch-enabled devices)

ehtd 12y ago

Nice effects

edent 12y ago

Works really well on Android using Samsung's S-Pen. Interesting to see if other mobile platforms can detect fingers hovering over the page.

sctb 12y ago

https://news.ycombinator.com/item?id=8854354 https://news.ycombinator.com/item?id=8854354