Simple hover effects with CSS(webkit) filters

View code Play Walkthrough

Description

Simple hover effects created with CSS filters. CSS3 filters are currently supported in WebKit nightlies. Hence the walkthrough only uses the -webkit prefix for applying the filter effects.

By default the images have the filter applied. Hovering disables the filter taking the images to the default state in a smooth transition.

Add New Comment

28 Comments

(close)
Sabri

Sabri

It’s not working in Opera.

iTonio

iTonio

Works well in Safari 6 too !

me

me

doesnt work in chrome 21

Milan

Milan

Uhhh, what? Works on my Chrome 21…

Chris Heilmann

Chris Heilmann

Webkit filters – not CSS3 filters. If you expect a certain browser and only code for that one it is only fair to say so.

Matan

Matan

Doesn’t work in safari 5…

Alex

Alex

Doesn’t work in Firefox either.

Thiphariel

Thiphariel

It’s webkit filters. It can’t work in Firefox or others non-webkit browser.

Maybe you should edit the title ;)

vit

vit

Awesome example.
like all your posts.
Keep up your great work, bro.

batch

batch

Keep up the good work. Great website.

Youz

Youz

Doesnt work in Firefox 15.
Work on Chrome 21.
And WTF for ie :)

ksajaN

ksajaN

I lol’d at “has to be specified specifically” xD

Joe

Joe

Wow. Awesome tutorial, thanks for sharing. I am certainly clicking those adds. ;)

Andrew

Andrew

People should really grow up and use Chrome.

Arda

Arda

work in chrome 23

Colton

Colton

Just some reassurance, works in Chrome 26 (Canary build) ;)

Chrome… is… AWESOME!

Imane

Imane

Awesome tutorial thks for sharing :)

Julio

Julio

It works perfectly on Opera Next (webkit)

Prince

Prince

It’s not working in FireFox!

Juneray Kim

Juneray Kim

Well .its not working with mine too.

Maybe it has the the java script.

Fabio

Fabio

Hello! It’a not working in IE

MrAccident

MrAccident

Doesn’t work in FireFox (up to date) 28,10,2013.

Callum

Callum

How do i give this a background – i have tried giving the div its inside a background color by doing
#gallery{
background:#fff;
}

Mihaly4

Mihaly4

Awesome tutorial!!!!!!!!
Not working in Firefox :(
Great work, bro.

Denis

Denis

I don’t get where the fade-in effect comes from without JavaScript?

Rainy

Rainy

Simple but interesting! Thx for sharing!

5x 10x 15x 20x

28 Comments

Description