samedi 5 mai 2012

Ken Burns effect using CSS

The Ken Burns effect is a special effect used in documentaries when you only have a static photograph of an interesting item. To add some movement and life to the photograph, you zoom into the photo and pan towards a point of interest. It's named the Ken Burns effect because it was used a lot by a documentary film maker named Ken Burns.


You can achieve the Ken Burns effect using CSS animations. It's not even particularly difficult. Just create a div with overflow:hidden to hold the image, then change the image's CSS transform property. Or if you want to be totally retro and backwards-compatible, you could also achieve the effect by changing the image's top, left, width and height using a JS setInterval.

So, CSS:

.kenburns {

overflow: hidden;

display: inline-block;


.kenburns img {

transition-duration: 5s;

transform: scale(1.0);

transform-origin: 50% 50%;


.kenburns img:hover {

transform: scale(1.2);

transform-origin: 50% 0%; /* pan towards top of image */


And the corresponding HTML:

<div class="kenburns" style="width:640px; height:480px;">

<img src="image.jpg" width="640" height="480">


If you hover over the image, it will slowly zoom in and pan towards its top edge.

You can see the effect in action here. And a more complex version with a JS-driven lightbox here.

The (quick, hacky) code is on GitHub.

Aucun commentaire:

Enregistrer un commentaire