Go nuts with CSS3 hover effects

http://tympanus.net/Tutorials/OriginalHoverEffects/index4.html

by franze • 15 years ago

314 68 15 years ago

iaskwhy4• 15 years 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.

grovulent2• 15 years 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.

iaskwhy4• 15 years 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.

Xixi2• 15 years 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.

einhverfr3• 15 years 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.

lloeki• 15 years ago

On my iPad this demo just works by tapping. Very smooth too.

babuskov• 15 years 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.

billswift• 15 years 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.

harlanlewis2• 15 years 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• 15 years ago

fanboyism?

kalleboo• 15 years ago

We finally killed Flash and now we get this.

mattmanser• 15 years ago

This was inevitable, killing Flash just means you're now not going to be able to disable ads with flash block.

eCa• 15 years ago

You probably want something like this: https://addons.mozilla.org/en-US/firefox/addon/elemhidehelpe...

Haven't used it, hopefully it will be useful when Flash is gone.

ugh• 15 years ago

Uhm, that doesn’t even make sense. Why would the death of Flash imply that? You make no sense.

peng• 15 years 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.

einhverfr3• 15 years 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• 15 years 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• 15 years 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.

dmethvin• 15 years ago

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.

lell• 15 years 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.

_frog2• 15 years 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• 15 years 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.

wlievens• 15 years ago

If your site is for instance, much like the demo case suggests here, presenting fashion items, then decoration and style is part of the content.

damoncali• 15 years ago

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

harlanlewis2• 15 years ago

It seems that many commenters are missing the value of a demo combining effects in new ways, presented in a new context.

There are many app experiences beyond simple navigation that ask for and respond to actions/events - many would benefit greatly by expressive animation. I agree the effects shown are more distracting than useful, but this isn't a CSS template for folks to copypaste. It's inspiration to experiment and discover the subtle, sophisticated, delightful details that make your app feel alive and exciting without going so far that it becomes a whirling and twirling abomination.

Use some design judgement. Don't sniff at the tech demo for being a tech demo.

mortenjorck• 15 years ago

Animation is not at all mutually exclusive of good usability. Usable animation makes state transitions clear to users in ways instant transitions never could.

The perennial example is iOS: Almost all of the animation is there to guide the user through what's happening when the state changes. Left/right transitions make view hierarchies intuitive to follow. Expand/contract animations spatially establish the home screen as the very top level. It's subtle at times, but the animation in iOS is almost never decorative; it's only "fun" because it builds and reinforces the user's mental model of what they're navigating, making them feel in control.

zwaldowski• 15 years ago

The one thing I was thinking about while looking at these was how badly one needed to be the alert view "pop" from iOS. Such an aesthetically pleasing effect that gets the UX metaphor across extremely well.

Macsenour• 15 years ago

It's a DEMO. I agree with you... nice demo...

mike-cardwell2• 15 years ago

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

Achshar• 15 years 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• 15 years ago

> Worked even though I have JavaScript disabled.

This is exactly the problem.

mike-cardwell2• 15 years 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• 15 years 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• 15 years ago

You could block such things in a user stylesheet.

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

ed209• 15 years 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• 15 years ago

Perfect for a menu of food or medicine

smackay• 15 years 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• 15 years 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• 15 years ago

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

codehalo• 15 years 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• 15 years ago

Are you sure the same people are saying both?

foxhop• 15 years ago

Pair Original Hover Effects with 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• 15 years ago

it's like, days of Flash again !

vosper• 15 years 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• 15 years ago

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

gcb• 15 years ago

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

artursapek2• 15 years ago

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

oe• 15 years ago

Yes, on OSX + Chrome 15

artursapek2• 15 years ago

That's my setup too

kwamenum86• 15 years ago

buggy but cool

gadgetdevil• 15 years 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• 15 years ago

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

Go nuts with CSS3 hover effects

Related Stories