8 ms·

Go nuts with CSS3 hover effects

314 points by franze 15y ago

iaskwhy 15y ago
When the iPhone was released I thought it would be the end of hover. I know that's what I think about when I see something like a menu which only works on hover.
- grovulent 15y ago
  Always surprises me that developers let platform makers dictate what they can use and what they can't. If developers chose to use stuff on the basis of what they as developers think should be used - and if that meant iphone users couldn't use them - guess who would ultimately win that battle? Not Apple. IE would have died years ago if developers had adopted that culture en masse.
  - iaskwhy 15y ago
    That would be right if this was about platforms but it's not, it's about interaction. If you can't hover then why depend on it? Also, it's easy to add a touch event to do the same as the hover event, it's up to developers to do it. I was just thinking about the dependency of hover which need to go.
    - jeffehobbs 15y ago
      Exactly right. The thing I don't like about hover is that at core, it's a leap of faith -- you're asking your user to mouse around blindly (like Myst, anyone remember that frustration?) until the page rewards their fumbling with some sort of UI treat. It's a symptom of inefficient and poor design. (Having said that, these are lovely animations.)
      - iaskwhy 15y ago
        Events like hover (or swipe, or trying to scroll out of the box) are really good for the experience side of design. It's that leap of faith that works that sometimes creates such a special connection between the user and the interface. If one ignores usability to favor experience then it's inefficient and poor design but I believe sometimes there's a good compromise between both. It's also important to note that discoverability is really different than it used to be due to touchscreens and that plays a major role in usability.
  - Xixi 15y ago
    The hover is not an iPhone vs developer problem, it's a touchscreen problem. Hover feels very natural with a mouse, but there's no logical equivalent on a touchscreen. "on hover" is a side effect of pointing at things with a mouse. With a touch screen you touch things directly with your finger, you don't hover. So you have to design your website/app with that in mind: users will touch whatever they want to interact with. That's neither a mouse "on hover", nor a mouse "click". Of course you can forgo people who use touchscreen, or even mouse and go keyboard only... it's a choice.
    - dexen 15y ago
      > ...but there's no logical equivalent [to hover] on a touchscreen. There isn't now, but there well could be. Suppose for a moment that you get a good old cursor on iPhone and it follows your fingertip as you move it around the screen. It wouldn't even have to be user-visible. To click, you press a bit stronger, or you raise & lower your finger (`tap' if you will). The hover's back. There's nothing inherent in touch-based technology that prevents hovers from working. Such behavior has been available way on (decent) touchpads for well over a decade now, modulo user-level configuration.
      - Xixi 15y ago
        > There isn't now, but there well could be. Or not. On touch touchscreen it feels natural to just touch the part of the screen you want to interact with. I hate the word, but it's intuitive. It doesn't feel like something you need to learn and become familiar with. My daughter understood how to use my iPad when she was less that one year old. She just touched the screen and something happened, she was happy. Even my mother-in-law understand how to use a touchscreen. Neither my daughter nor my mother-in-law can use a mouse: it requires too much dexterity. I've seen people hovering a mouse in front of the screen hoping that something will happen. It's less intuitive, but it's familiar to all of us on hackernews. What I'm trying to say is that there is something intrinsically natural and easy with a touchscreen: touch - interact. We won't go back from that. I might be proven wrong, and tomorrow everybody will do on hover with its phone/tablet with the process you describe, or the one described by grovulent, or another one. But my guess is that it will remain mostly unused, except for a few "power users".
  - einhverfr 15y ago
    I'd actually agree with you. On LedgerSMB we made the decision to drop support for IE due to a lack of BUTTON support. Then IE7 came out which was still too broken and we didn't support IE. Then IE8 came out and supported buttons so we could support them again. The tradeoff was simple: marginally greater market share at the time vs the fact that if we supported IE we would not be able to use BUTTONs to separate labels and inputs for i18n purposes. Really, there was no case to be made for IE support at that point. So developers hsould consider the tradeoffs carefully.
    - rimantas 15y ago
      > drop support for IE due to a lack of BUTTON support We must be thinking about different BUTTON there. IIRC IE supports button since version 4.
      - rglullis 15y ago
        You are both correct. IE always had a <button> element, however it only started working like other browsers on IE8. Before that it behaved like an <input>; you had to add "type=submit" to get it to actually submit the form.
- lloeki 15y ago
  On my iPad this demo just works by tapping. Very smooth too.
babuskov 15y ago
Usability vs cool UI is always a tough one. The ones who can do both at the same time are geniuses. That's why Apple is always on top.
- deleted 15y ago
  [deleted]
- billswift 15y ago
  Only for some people. For others, including myself, usability wins every time. Even for entertainment, I want the controls to fade into the background.
  - harlanlewis 15y ago
    You said it yourself - you want the controls to _fade_ into the background. A fade is a very simple animation to communicate what's happening, but the details of duration and exponential vs linear transition can make a simple fade seem frantic, soothing, or even invisible. When you say "fade into the background", I assume you mean a linear animation that takes about 1 second. It's pretty awesome that the world has a very specific fade that serves as a "word" in our shared design language. Interactions are filled with interstitials and microstates, but a fade isn't really appropriate for all of them. While we try to figure them out, some folks will make animations that remind us of geocities - but others are going to express actions with animations that seem so natural we can't help but describe the action as the animation. Just as you did. And then our shared design language will have a new word.
- dogfu 15y ago
  fanboyism?
kalleboo 15y ago
We finally killed Flash and now we get this.
- mattmanser 15y ago
  This was inevitable, killing Flash just means you're now not going to be able to disable ads with flash block.
  - eCa 15y ago
    You probably want something like this: https://addons.mozilla.org/en-US/firefox/addon/elemhidehelper/ https://addons.mozilla.org/en-US/firefox/addon/elemhidehelpe... Haven't used it, hopefully it will be useful when Flash is gone.
  - ugh 15y ago
    Uhm, that doesn’t even make sense. Why would the death of Flash imply that? You make no sense.
peng 15y ago
Touchscreen issues notwithstanding, hover effects like this are awful for usability. The hover overlay completely obscures the original image, making it impossible to read the snippet and enjoy the image at the same time. The animation effect is more garish than anything, but this is a probably a personal quibble. It takes 200 ms for the hover effects to finish loading. I'd rather have the hover transition instantly, so I can spend less of my life watching text fade in. The Chrome Web Store uses this to excess, with sliding panes flying everywhere. It looks great, but it's really painful to use.
- einhverfr 15y ago
  There are times when I find hover effects really helpful from a usability perspective. For example, with the right parameters, you can make text preview panes expand to view the entire text panel, and if white space is well used, the hovering doesn't get in the way too much. This said, and while I realize this is a demo to show what can be done with CSS3, and while it is impressive, it gives me a headache. I wonder how long before we see Pokemon-style photosensitivity-induced seizures from CSS3 in the hands of clueless web devs.
  - jrubinovitz 15y ago
    I agree with the seizure point. I think this is a bit too "nuts." I showed it to my friend who has frequent seizures and she agreed. I would not recommend CSS moving this quickly for general use.
- CubicleNinjas 15y ago
  Hover effects aren't awful for usability at all. It is about using this in the appropriate context. They add two distinct advantages: 1) Ease of accessing additional information. Instead of having a click based event a rollout is 100x easier to accomplish and can reduce clutter on a page. This is accomplished by being clear with labels, such as a "More Info" or "Rollover for details". It is surprising to find out out how many users won't click. 2) Whimsy. The emotional impact these have is wonderful, and to discount it is to ignore the delight of this new medium. As for the touchscreen issue, these would be handled in a click state. This is how hover menus are handled in iOS for example.
lell 15y ago
Why is everyone shitting on this in the comments? It's a demo: you can't complain that it's hindering usability or enjoyment of the pictures when there is no context in which you might use it or enjoy the pictures. When I saw this I thought it might be nice for the website of a magazine like vogue or something: some sites are about decoration and style, usability can be at the back of the priorities. Just because it wouldn't survive A/B testing on the landing page of the most recent groupon clone doesn't mean it's not useful, cool or fun.
- _frog 15y ago
  > Some sites are about decoration and style, usability can be at the back of the priorities. I'm pretty sure this is exactly the problem people had with flash-heavy sites in the first place.
  - andrewfelix 15y ago
    Style, decoration and usability are not mutually exclusive. As with many disciplines they can co-exist beautifully. Frank Lloyd Wright's buildings wouldn't look much chop if he hadn't taken style into consideration.
    - _frog 15y ago
      Agreed, but effects like this are not style, they are a cheap veneer applied to otherwise poorly thought out designs. Fashionable kitsch integrated into otherwise unoriginal, uninspired designs.
      - Deestan 15y ago
        > Agreed, but effects like this are not style No, it's a tech demo with artsy pictures. This is very obvious. The site is also very bad as a computer game and a travel catalogue.
    - tgrass 15y ago
      Not to undermine the argument, but Wright does not prove the mutual inclusion of style and function. His buildings are notorious for structural problems.
mike-cardwell 15y ago
Wow, they actually are proper CSS hover effects. Worked even though I have JavaScript disabled.
- Achshar 15y ago
  not only are they pure CSS (hence GPU accelerated and hence work lightning fast without any considerable lag) but they are also very (!) easy to write.. such things with js would have easily taken north of 200 lines (non minified with proper new lines where required) where as with css it would only take something like 10-20 lines max.
- mike_ivanov 15y ago
  > Worked even though I have JavaScript disabled. This is exactly the problem.
  - mike-cardwell 15y ago
    If enough people dislike this, I'm sure somebody will write a "NoTransitions" browser addon, or fork Firefox/Chrome and remove the CSS transitions functionality.
anonymous 15y ago
Crap. This will be the next flash, won't it? Should I start writing the CSS3Block extension for all major browsers now, or is the effort already underway?
- pbhjpbhj 15y ago
  You could block such things in a user stylesheet. Animation is not the reason flash was [used] bad[ly].
ed209 15y ago
Thanks for these. I was able to enjoy them on their own merit without having to resort to fire and brimstone speculation that we're entering a new "skip intro" era.
rickdale 15y ago
Perfect for a menu of food or medicine
smackay 15y ago
The end of the Flash banner ad era is in sight. The sentiment is that this is simply replacing one evil with another but I think it will accelerate the migration from Flash so overall this is probably a good thing.
anjc 15y ago
Why is everyone comparing this to flash? Surely the problem with flash was one of accessibility and graceful degradation, rather than, say, having animated elements? There's nothing wrong with animations/transitions in the right context, right?
king_magic 15y ago
While I agree with some of the comments about usability, I'm pretty impressed with how far CSS has come.
codehalo 15y ago
I've been visiting this site for a while, and this is the first time I got a awful stomach ache reading the comments. What is it that you want? Websites that look like they are written to work in lynx and IE4, in the pretentious name of usability?. In one breath the lament is that the older browsers are not offering features to eliminate flash, you see the it now and bitch. What a bunch of hypocrites. Just use curl to read your web pages or go back to gopher.
- chc 15y ago
  Are you sure the same people are saying both?
foxhop 15y ago
Pair Original Hover Effects with http://linkpeek.com http://linkpeek.com for epic instant preview images! Use our screenshot service to embed self updating 75 pixel thumbnails on your site for free!
jaequery 15y ago
it's like, days of Flash again !
vosper 15y ago
For me, In Chrome on OSX the entire screen flashes blue during animation, and the page flickers constantly - anyone else get this? Apart from that I liked the effects as a proof-of-concept.
ww520 15y ago
All those demos are very cool. They expand my design sense to see what's possible. Excellent work.
gcb 15y ago
on demo6, if you move the mouse fast over them... my CPU gets as hammered as if it were flash.
artursapek 15y ago
Does anyone else get a flash of black over the whole page once in a while during the transitions?
- oe 15y ago
  Yes, on OSX + Chrome 15
  - artursapek 15y ago
    That's my setup too
kwamenum86 15y ago
buggy but cool
gadgetdevil 15y ago
If you hate Animations, then have your browser disable CSS3 animations. Any website worth its salt will use Modernizr & jQuery to gracefully fall back.
tcarnell 15y ago
Very impressive - I thing I like #10 the most! thanks

314 points by franze 15y ago

When the iPhone was released I thought it would be the end of hover. I know that's what I think about when I see something like a menu which only works on hover.

grovulent 15y ago
Always surprises me that developers let platform makers dictate what they can use and what they can't. If developers chose to use stuff on the basis of what they as developers think should be used - and if that meant iphone users couldn't use them - guess who would ultimately win that battle? Not Apple. IE would have died years ago if developers had adopted that culture en masse.
- iaskwhy 15y ago
  That would be right if this was about platforms but it's not, it's about interaction. If you can't hover then why depend on it? Also, it's easy to add a touch event to do the same as the hover event, it's up to developers to do it. I was just thinking about the dependency of hover which need to go.
  - jeffehobbs 15y ago
    Exactly right. The thing I don't like about hover is that at core, it's a leap of faith -- you're asking your user to mouse around blindly (like Myst, anyone remember that frustration?) until the page rewards their fumbling with some sort of UI treat. It's a symptom of inefficient and poor design. (Having said that, these are lovely animations.)
    - iaskwhy 15y ago
      Events like hover (or swipe, or trying to scroll out of the box) are really good for the experience side of design. It's that leap of faith that works that sometimes creates such a special connection between the user and the interface. If one ignores usability to favor experience then it's inefficient and poor design but I believe sometimes there's a good compromise between both. It's also important to note that discoverability is really different than it used to be due to touchscreens and that plays a major role in usability.
- Xixi 15y ago
  The hover is not an iPhone vs developer problem, it's a touchscreen problem. Hover feels very natural with a mouse, but there's no logical equivalent on a touchscreen. "on hover" is a side effect of pointing at things with a mouse. With a touch screen you touch things directly with your finger, you don't hover. So you have to design your website/app with that in mind: users will touch whatever they want to interact with. That's neither a mouse "on hover", nor a mouse "click". Of course you can forgo people who use touchscreen, or even mouse and go keyboard only... it's a choice.
  - dexen 15y ago
    > ...but there's no logical equivalent [to hover] on a touchscreen. There isn't now, but there well could be. Suppose for a moment that you get a good old cursor on iPhone and it follows your fingertip as you move it around the screen. It wouldn't even have to be user-visible. To click, you press a bit stronger, or you raise & lower your finger (`tap' if you will). The hover's back. There's nothing inherent in touch-based technology that prevents hovers from working. Such behavior has been available way on (decent) touchpads for well over a decade now, modulo user-level configuration.
    - Xixi 15y ago
      > There isn't now, but there well could be. Or not. On touch touchscreen it feels natural to just touch the part of the screen you want to interact with. I hate the word, but it's intuitive. It doesn't feel like something you need to learn and become familiar with. My daughter understood how to use my iPad when she was less that one year old. She just touched the screen and something happened, she was happy. Even my mother-in-law understand how to use a touchscreen. Neither my daughter nor my mother-in-law can use a mouse: it requires too much dexterity. I've seen people hovering a mouse in front of the screen hoping that something will happen. It's less intuitive, but it's familiar to all of us on hackernews. What I'm trying to say is that there is something intrinsically natural and easy with a touchscreen: touch - interact. We won't go back from that. I might be proven wrong, and tomorrow everybody will do on hover with its phone/tablet with the process you describe, or the one described by grovulent, or another one. But my guess is that it will remain mostly unused, except for a few "power users".
- einhverfr 15y ago
  I'd actually agree with you. On LedgerSMB we made the decision to drop support for IE due to a lack of BUTTON support. Then IE7 came out which was still too broken and we didn't support IE. Then IE8 came out and supported buttons so we could support them again. The tradeoff was simple: marginally greater market share at the time vs the fact that if we supported IE we would not be able to use BUTTONs to separate labels and inputs for i18n purposes. Really, there was no case to be made for IE support at that point. So developers hsould consider the tradeoffs carefully.
  - rimantas 15y ago
    > drop support for IE due to a lack of BUTTON support We must be thinking about different BUTTON there. IIRC IE supports button since version 4.
    - rglullis 15y ago
      You are both correct. IE always had a <button> element, however it only started working like other browsers on IE8. Before that it behaved like an <input>; you had to add "type=submit" to get it to actually submit the form.
lloeki 15y ago
On my iPad this demo just works by tapping. Very smooth too.

babuskov 15y ago

Usability vs cool UI is always a tough one. The ones who can do both at the same time are geniuses. That's why Apple is always on top.

deleted 15y ago
[deleted]
billswift 15y ago
Only for some people. For others, including myself, usability wins every time. Even for entertainment, I want the controls to fade into the background.
- harlanlewis 15y ago
  You said it yourself - you want the controls to _fade_ into the background. A fade is a very simple animation to communicate what's happening, but the details of duration and exponential vs linear transition can make a simple fade seem frantic, soothing, or even invisible. When you say "fade into the background", I assume you mean a linear animation that takes about 1 second. It's pretty awesome that the world has a very specific fade that serves as a "word" in our shared design language. Interactions are filled with interstitials and microstates, but a fade isn't really appropriate for all of them. While we try to figure them out, some folks will make animations that remind us of geocities - but others are going to express actions with animations that seem so natural we can't help but describe the action as the animation. Just as you did. And then our shared design language will have a new word.
dogfu 15y ago
fanboyism?

kalleboo 15y ago

We finally killed Flash and now we get this.

mattmanser 15y ago
This was inevitable, killing Flash just means you're now not going to be able to disable ads with flash block.
- eCa 15y ago
  You probably want something like this: https://addons.mozilla.org/en-US/firefox/addon/elemhidehelper/ https://addons.mozilla.org/en-US/firefox/addon/elemhidehelpe... Haven't used it, hopefully it will be useful when Flash is gone.
- ugh 15y ago
  Uhm, that doesn’t even make sense. Why would the death of Flash imply that? You make no sense.

peng 15y ago

Touchscreen issues notwithstanding, hover effects like this are awful for usability. The hover overlay completely obscures the original image, making it impossible to read the snippet and enjoy the image at the same time. The animation effect is more garish than anything, but this is a probably a personal quibble. It takes 200 ms for the hover effects to finish loading. I'd rather have the hover transition instantly, so I can spend less of my life watching text fade in. The Chrome Web Store uses this to excess, with sliding panes flying everywhere. It looks great, but it's really painful to use.

einhverfr 15y ago
There are times when I find hover effects really helpful from a usability perspective. For example, with the right parameters, you can make text preview panes expand to view the entire text panel, and if white space is well used, the hovering doesn't get in the way too much. This said, and while I realize this is a demo to show what can be done with CSS3, and while it is impressive, it gives me a headache. I wonder how long before we see Pokemon-style photosensitivity-induced seizures from CSS3 in the hands of clueless web devs.
- jrubinovitz 15y ago
  I agree with the seizure point. I think this is a bit too "nuts." I showed it to my friend who has frequent seizures and she agreed. I would not recommend CSS moving this quickly for general use.
CubicleNinjas 15y ago
Hover effects aren't awful for usability at all. It is about using this in the appropriate context. They add two distinct advantages: 1) Ease of accessing additional information. Instead of having a click based event a rollout is 100x easier to accomplish and can reduce clutter on a page. This is accomplished by being clear with labels, such as a "More Info" or "Rollover for details". It is surprising to find out out how many users won't click. 2) Whimsy. The emotional impact these have is wonderful, and to discount it is to ignore the delight of this new medium. As for the touchscreen issue, these would be handled in a click state. This is how hover menus are handled in iOS for example.

lell 15y ago

Why is everyone shitting on this in the comments? It's a demo: you can't complain that it's hindering usability or enjoyment of the pictures when there is no context in which you might use it or enjoy the pictures. When I saw this I thought it might be nice for the website of a magazine like vogue or something: some sites are about decoration and style, usability can be at the back of the priorities. Just because it wouldn't survive A/B testing on the landing page of the most recent groupon clone doesn't mean it's not useful, cool or fun.

_frog 15y ago
> Some sites are about decoration and style, usability can be at the back of the priorities. I'm pretty sure this is exactly the problem people had with flash-heavy sites in the first place.
- andrewfelix 15y ago
  Style, decoration and usability are not mutually exclusive. As with many disciplines they can co-exist beautifully. Frank Lloyd Wright's buildings wouldn't look much chop if he hadn't taken style into consideration.
  - _frog 15y ago
    Agreed, but effects like this are not style, they are a cheap veneer applied to otherwise poorly thought out designs. Fashionable kitsch integrated into otherwise unoriginal, uninspired designs.
    - Deestan 15y ago
      > Agreed, but effects like this are not style No, it's a tech demo with artsy pictures. This is very obvious. The site is also very bad as a computer game and a travel catalogue.
  - tgrass 15y ago
    Not to undermine the argument, but Wright does not prove the mutual inclusion of style and function. His buildings are notorious for structural problems.

mike-cardwell 15y ago

Wow, they actually are proper CSS hover effects. Worked even though I have JavaScript disabled.

Achshar 15y ago
not only are they pure CSS (hence GPU accelerated and hence work lightning fast without any considerable lag) but they are also very (!) easy to write.. such things with js would have easily taken north of 200 lines (non minified with proper new lines where required) where as with css it would only take something like 10-20 lines max.
mike_ivanov 15y ago
> Worked even though I have JavaScript disabled. This is exactly the problem.
- mike-cardwell 15y ago
  If enough people dislike this, I'm sure somebody will write a "NoTransitions" browser addon, or fork Firefox/Chrome and remove the CSS transitions functionality.

anonymous 15y ago

Crap. This will be the next flash, won't it? Should I start writing the CSS3Block extension for all major browsers now, or is the effort already underway?

pbhjpbhj 15y ago
You could block such things in a user stylesheet. Animation is not the reason flash was [used] bad[ly].

ed209 15y ago

Thanks for these. I was able to enjoy them on their own merit without having to resort to fire and brimstone speculation that we're entering a new "skip intro" era.

rickdale 15y ago

Perfect for a menu of food or medicine

smackay 15y ago

The end of the Flash banner ad era is in sight. The sentiment is that this is simply replacing one evil with another but I think it will accelerate the migration from Flash so overall this is probably a good thing.

anjc 15y ago

Why is everyone comparing this to flash? Surely the problem with flash was one of accessibility and graceful degradation, rather than, say, having animated elements? There's nothing wrong with animations/transitions in the right context, right?

king_magic 15y ago

While I agree with some of the comments about usability, I'm pretty impressed with how far CSS has come.

codehalo 15y ago

I've been visiting this site for a while, and this is the first time I got a awful stomach ache reading the comments. What is it that you want? Websites that look like they are written to work in lynx and IE4, in the pretentious name of usability?. In one breath the lament is that the older browsers are not offering features to eliminate flash, you see the it now and bitch. What a bunch of hypocrites. Just use curl to read your web pages or go back to gopher.

chc 15y ago
Are you sure the same people are saying both?

foxhop 15y ago

Pair Original Hover Effects with http://linkpeek.com http://linkpeek.com for epic instant preview images! Use our screenshot service to embed self updating 75 pixel thumbnails on your site for free!

jaequery 15y ago

it's like, days of Flash again !

vosper 15y ago

For me, In Chrome on OSX the entire screen flashes blue during animation, and the page flickers constantly - anyone else get this? Apart from that I liked the effects as a proof-of-concept.

ww520 15y ago

All those demos are very cool. They expand my design sense to see what's possible. Excellent work.

gcb 15y ago

on demo6, if you move the mouse fast over them... my CPU gets as hammered as if it were flash.

artursapek 15y ago

Does anyone else get a flash of black over the whole page once in a while during the transitions?

oe 15y ago
Yes, on OSX + Chrome 15
- artursapek 15y ago
  That's my setup too

kwamenum86 15y ago

buggy but cool

gadgetdevil 15y ago

If you hate Animations, then have your browser disable CSS3 animations. Any website worth its salt will use Modernizr & jQuery to gracefully fall back.

tcarnell 15y ago

Very impressive - I thing I like #10 the most! thanks