

Go nuts with CSS3 hover effects - franze
http://tympanus.net/Tutorials/OriginalHoverEffects/index4.html

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

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

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

------
anjc
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?

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

~~~
chc
Are you sure the same people are saying both?

------
mike-cardwell
Wow, they actually _are_ proper CSS hover effects. Worked even though I have
JavaScript disabled.

~~~
mike_ivanov
> Worked even though I have JavaScript disabled.

This is _exactly_ the problem.

~~~
mike-cardwell
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.

------
kalleboo
We finally killed Flash and now we get this.

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

~~~
eCa
You probably want something like this: [https://addons.mozilla.org/en-
US/firefox/addon/elemhidehelpe...](https://addons.mozilla.org/en-
US/firefox/addon/elemhidehelper/)

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

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

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

~~~
Xixi
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
_> ...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
> 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".

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

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

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

~~~
oe
Yes, on OSX + Chrome 15

~~~
artursapek
That's my setup too

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

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

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

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

------
foxhop
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!

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

------
rickdale
Perfect for a menu of food or medicine

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

------
kwamenum86
buggy but cool

------
jaequery
it's like, days of Flash again !

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

------
anonymous
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
You could block such things in a user stylesheet.

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

