Today at lunch, I decided to play around with what CSS image filters and transformations can do. CSS filters will bring “Photoshop-like” styles to the web, easily editable and very interactive.
In this experiment, I tried making a basic image gallery example, playing around with simulating depth-of-field. Images that are not being hovered appear in the background, blurred out and grayed out a bit. When an image is hovered, it snaps to the front, in focus.
Right now this is Webkit-only, so only Chrome & Safari. Sorry Firefox & IE!
(Actually, I’m really not that sorry to IE…)
View the CodePen example below: