Beautiful Image Hover Effect Using Only Webkit CSS (No JS)

http://www.nikesh.me/blog/2010/05/sexy-image-hover-effects-using-css3/

by theone • 16 years ago

65 48 16 years ago

NathanKP3• 16 years ago

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.

MartinCron3• 16 years ago

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.

jacquesm2• 16 years ago

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

RossM• 16 years ago

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.

jacquesm2• 16 years ago

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

metamemetics4• 16 years ago

17.2% (does not work in Opera)

yread• 16 years ago

Only for webkit

mgcross• 16 years ago

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.

sesqu• 16 years ago

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.

rev0872• 16 years ago

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.

nirmal2• 16 years ago

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?

NathanKP3• 16 years ago

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.

rev0872• 16 years ago

If you use a javascript library such as Mootools, you could add a onDomReady event, wich fires as soon as the HTML is rendered - even before the <img>. Of course that means yet more Kbs, but almost all solutions have their downsides.

Regarding the original comment, I do feel the urge...clean and easy to maintain HTML is an irresistible compulsion for me :}

nirmal2• 16 years ago

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.

CoryMathews• 16 years ago

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• 16 years ago

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• 16 years ago

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

rokhayakebe• 16 years ago

From the comments it says you should switch -webkit to -moz for Firefox, I believe.

cousin_it2• 16 years ago

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

metamemetics4• 16 years ago

It isn't. You'd never include this on an actual site due to compatibility, whereas doing it in jQuery would ensure it works on even IE6. All the "cool effect X using browser specific css" posts you see everywhere on the net are pointless.

j794• 16 years ago

They're not "pointless". The articles you're reading now are the future of the web. Handling hover events using JavaScript, when it's strictly presentation, makes much more sense with CSS. You wouldn't use JavaScript to add underlines to links, would you?

In addition (since you mention compatibility), adding this to a site wouldn't "break" it. So a segment of your visitors wouldn't see a "hover" event when they mouse over your images. It still functions properly.

stan_rogers• 16 years ago

Think of this as you would of NTSC television signals -- people with old black-and-white televisions can still watch the shows, but they wouldn't see all the pretty colours, and probably wouldn't have access to SAP or closed captioning. Progressive enhancement means that people using IE6 (or Lynx, for that matter) can still use the site, but they might not see the latest features.

Using JS to do the dirty work for something that is really no more than pleasant eye candy is somewhat reminiscent of some of the schemes I remember for embedding screen-edge encoding to control mechanical colour wheels to enable colour viewing on B&W tvs -- now, that's pointless.

j794• 16 years ago

It's the idea of progressive enhancement. Markup for your content, CSS for your presentation, and JavaScript for behavior/functionality.

simonw• 16 years ago

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.

zokier• 16 years ago

These kind of CSS extensions and hacks really begin to feel like Interweb has gotten a new shiny hammer, and is trying to do everything with it. IMHO a cleaner solution would be to have all interactivity/animation done in JS and CSS for styling only.

cousin_it2• 16 years ago

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

nightshadow• 16 years ago

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.

MartinCron3• 16 years ago

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.

glhaynes• 16 years ago

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.

MartinCron3• 16 years ago

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.

not_an_alien• 16 years ago

Yeah, but how is that going to work in the iPad since it has no hover?

durbin• 16 years ago

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

onecreativenerd• 16 years ago

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

th• 16 years ago

My CPU usage is still lower than it usually is when a Flash plugin is loaded.

ugh• 16 years ago

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

Pistos2• 16 years ago

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

drivebyacct• 16 years ago

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

Beautiful Image Hover Effect Using Only Webkit CSS (No JS)

Related Stories