css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Depth of field effect on hover. Based on PNGs with alpha transparency and SVG filters in CSS3. As of Firefox 35, works in both Firefox and Chrome.


  1. .blurable { -webkit-transition: -webkit-filter linear 1s; } That code makes it even nicer!

  2. This is a really cool effect. A smooth transition would make it super-duper

  3. Excellent concept...This is my favorite pen since the birth of the site. great work.

  4. Added the transition, thanks for the idea Matt and Jeroen.

  5. Really awesome. It's a bit slow, but I'd like to see effects like this used in more sites in the future!

  6. Cool. Like the transition, but 1s is way too long. Make it more dynamic maybe? Like not more than .5s?

  7. beautiful!! Very great!

  8. Absolutely stunning

  9. Perfectly done!!!

  10. whoa that's wild!

  11. Clever... a lot of work, but very clever.

  12. Power of SVG. Very nice work, congrats ! :)

  13. Power of SVG. Very nice work, congrats ! :)

  14. sexxxxxyyyyyyyyyyyyyyyyyy!!!!!!!!!!!!!!!!!!

  15. This was featured in Divya Manian's (also Erik Dahlström's) Svg Open 2012 presentation. Anybody who is interested can have a look at the whole presentation by visiting: http://dahlström.net/svg/presentations/svgopen2012/presentation/

  16. That is so cool! Thanks Onur for letting me know.

  17. Cool effect! Isn't there a plugin available which does that?

  18. Not that I'm aware of. Do you mean a jQuery plugin?

  19. A very cool effect. The flickering can be solved using -webkit-backface-visibility: hidden; and perspective.

  20. Have you considered adding “tap to focus” functionality for touch devices?

  21. @simevidas No is the short answer. I saw a demo of the Lytro, wondered how I could mirror the demo in HTML, and this is what I came up with. But your question, makes me think about the short comings of this technique. I'm not sure I would want to use this on a real site, as I don't think image maps on the whole are very usable. It is not obvious that the image is interactive and that is a big problem. If I were to consider this technique on a real site, I would start by making the images responsive and rewriting the area shapes to use percentage coordinates, so it would scale on different viewports. Then I would make sure it was keyboard focusable which it is not currently. Figuring out how to make it function on touch devices would be the next problem to solve.

  22. Great work! But isn't this CSS filter instead of SVG filters?

  23. @vennsoh When I made this pen the filter property in CSS was new and had been borrowed from / based on the SVG functionality. At that point this only worked in Chrome, so I created another version that works in Firefox and uses an SVG URL as the filter value. You can check out that one at http://codepen.io/vcurd/pen/fmHJL

  24. @vcurd Thanks for the clarifications! This is awesome. Should update the description in your project to include links to both implementations.

  25. This is really cool. nice work

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.