

Beautiful Image Hover Effect Using Only Webkit CSS (No JS) - theone
http://www.nikesh.me/blog/2010/05/sexy-image-hover-effects-using-css3/

======
glhaynes
The dark box flipping around on top of the picture seems gratuitous and
pointless. It'd be a nicer effect if the picture just zoomed and became
brighter.

~~~
MartinCron
I totally agree, I'm guessing that the example included that just to
demonstrate what was possible as each picture had a different dark box effect.

Other than that, this looks awesome, at least in Chrome on Mac.

------
nightshadow
There is a big flaw in CSS3 implementation of animation:

If the animation is interrupted midway (i.e the animation happens on :hover,
and the user moves the mouse away), the reversed animation always takes the
same amount of time. This can result in the reverse animation proceeding at
different speeds (try setting the -webkit-transition-duration to 5s, and hover
your mouse over the element for just a second).

Instead, the browser should precisely reverse the animation it has already
played, e.g. if half the animation has already occured, for 0.25 seconds, the
reverse animation should similarly last only 0.25 seconds.

~~~
MartinCron
The example in the linked article behaves exactly as you describe, at least in
Chrome on Mac. If I just fleetingly hover over something, it pulses up and
down at the same speed for the same amount of time. It just looks _right_.

------
not_an_alien
Yeah, but how is that going to work in the iPad _since it has no hover?_

------
mgcross
Nice demo, but I feel that the title is a little misleading as the CSS is more
so webkit-specific CSS than it is CSS3.

------
nirmal
When I looked at the markup, I thought, "I would use JS to insert those mask
divs." Does anyone else feel that same base compulsion to keep the markup
clean?

~~~
NathanKP
Not really. Using JavaScript to add mask <div>'s is a messier solution,
requiring more KB of code, especially if you want it to work on all browsers,
even those that don't properly support DOM manipulation. Also the JavaScript
would have to run after the other parent <div> has already been downloaded and
rendered, meaning that there would be a brief time when there was no mask.

In my opinion, it is just easier and cleaner to add an extra <div> to the code
than to add a bunch of extra lines of JavaScript to do the same thing.

~~~
nirmal
Just so I'm not missing something, are there browsers which would support the
Webkit CSS but not support DOM manipulation? Or are you concerned with people
running NoScript style plugins?

Not being hostile, just want to clarify.

~~~
NathanKP
Yes, NoScript is a problem. However, I was referring to other scenarios in
general where a problem can be solved by just adding a <div> in HTML code. It
seems more economical to me to add the <div> manually to the HTML code as in
this Webkit example rather than writing a JavaScript routine to manipulate the
HTML code at runtime on the client's machine as you suggested.

------
sesqu
I'm not sure you can call _-webkit-transition-duration_ CSS3.

That said, the animations are really just sugar, and would be painful in any
browser that doesn't handle them very fast (I used to hate lightbox). Since
the effect may still be worthwhile without them, and purdy with them, I prefer
this to javascript.

~~~
rev087
I do agree with the usability concerns. The less animation the better, imho.
If you remove the animation component that almost all "lightbox-like"
implementations use, it's quite a handy feature tho.

But then again, I guess the point of the article was about showcasing what one
could achieve with CSS alone.

------
CoryMathews
Arrrrg he used only the -webkit hacks and did not put the actual CSS3 commands
for other browsers.

i.e. -webkit-box-shadow:0px 0px 30px #ccc; should have box-shadow:0px 0px 30px
#ccc; and so on. It just ruined the entire article..

~~~
nikeshhayaran
It is just an example to show how differently we can use CSS3 transition
property ... I don't think it ruined the entire article..

~~~
chunkyslink
No, I completely agree. But I work with some CSS purists and they would
probably think the same thing. Ruined I tell you ! RUINED !

~~~
rimantas
CSS purist should learn that vendor prefixes are not hacks.

------
cousin_it
This looks nice, but could someone remind me, why is CSS better than
JavaScript for this kind of functionality?

~~~
simonw
The advantage of doing it in CSS is that browsers can implement animation
themselves.

Animation in JavaScript is a bit of a hack - run a loop with setInterval,
change the value of various CSS values for each frame, dynamically adjust the
frame rate based on the amount of time left, implement your own easing...

If an animation is described to the browser directly (fade from this value to
this value taking this much time) the browser can implement all of the above
itself, in a standard way. With access to APIs like Core Animation, the
browser can even take advantage of hardware acceleration.

I argue that it makes sense for browsers to provide an animation API. The only
remaining question is what form that API should take. It can either be exposed
as CSS syntax, or as part of the DOM APIs exposed to JavaScript
(document.animateElement(el, ...) for example).

CSS is meant to handle presentation logic, so if you define animation as part
of the presentation layer of your site then putting it there isn't really that
crazy.

~~~
cousin_it
Implement the whole animation API in CSS? What if I want the animation to be
triggered by button click instead of hover?

~~~
unfletch
Handle the click with javascript, adding a CSS class to the element. The class
definitions should look like those of :hover in this example.

------
jacquesm
That looks really cool. How big a %age of the mainstream browsers can show
this effect?

~~~
RossM
Well since it uses Webkit I guess just Chrome and Safari. It looks like
Firefox is behind on animations, although they've implemented transforms now.

~~~
jacquesm
I'm looking at it using firefox and the highlight seems to work for me.

~~~
sp332
There are some mask effects you're missing. Firefox ignores -webkit-* CSS.

------
NathanKP
Very nice! The code is simple and easy to read as well. Now if only webkit had
more thorough coverage in browsers so that we could use these pure CSS effects
and know that all our visitors can see them.

~~~
MartinCron
Effects like this should never be counted on for "all our visitors", it's
really more of a progressive enhancement/graceful degradation thing. Example:
hover effects won't ever work for people using touch-screen devices.

------
durbin
i think we have differing opinions on what is beautiful and sexy.

------
yread
Only for webkit

------
Pistos2
In contrast with what others have said, it works for me in Opera 10.53 in
Linux.

------
onecreativenerd
try moving the mouse around over the images and then look at your CPU graph

~~~
ugh
A quick peak at 25% as soon as I hover and that’s it (three year old 15" MBP).
Seems kinda tolerable.

------
drivebyacct
This could be done without JS for years. The neat part is doing it without
images.

