Playing around with CSS image filters and transforms

Posted in Experiments.

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:

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>