Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Go nuts with CSS3 hover effects

tympanus.net

Post reply on HN
Print view View original

41–50 of 70 posts

Re: Go nuts with CSS3 hover effects

#41

Post by CubicleNinjas »

peng wrote: post #7

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,…

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.

Re: Go nuts with CSS3 hover effects

#42

Post by iaskwhy »

mmachine wrote: post #37
Xixi wrote: post #28

Earlier quoted context omitted.

> 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…

That's some very narrow thinking backed only by your anecdotal evidence. Twenty years ago, I'm sure people would have been skeptical if you told them that someday, they would be able to wirelessly interact with a mass network of information via a touch-responsive, glassy device that fits in the palm of their hand. Now where would be today if we'd listened to THOSE skeptics...

C'mon, apart from the glass surface you are describing a paper or a book. The iPad is hardly a strange format.

Re: Go nuts with CSS3 hover effects

#43

Post by pbhjpbhj »

anonymous wrote: post #25

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?

You could block such things in a user stylesheet.

Animation is not the reason flash was [used] bad[ly].

Re: Go nuts with CSS3 hover effects

#44

Post by damoncali »

_frog wrote: post #13
lell wrote: post #10

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…

> 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.

And it won't go away, even when Flash finally dies, because people were doing it on purpose. Usability is not everything to everyone.

Re: Go nuts with CSS3 hover effects

#45

Post by codehalo »

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.

Re: Go nuts with CSS3 hover effects

#46

Post by Achshar »

mike-cardwell wrote: post #19

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

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.

Re: Go nuts with CSS3 hover effects

#49

Post by brohee »

dexen wrote: post #14
Xixi wrote: post #11

Earlier quoted context omitted.

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 w…

> ...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-…

Hover by eye tracking would make a lot more sense, and the camera is already there on most touchscreen devices.

Re: Go nuts with CSS3 hover effects

#50

Post by dmethvin »

peng wrote: post #7

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,…

The trigger here is hover, but the effects could be useful when triggered by other events, or as part of a timed presentation like a lightbox.
Post reply on HN