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.



Anyhow.



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">

</div>

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.