Ken Burns CSS Hover Effect

What do you mean "who's Ken Burns"?

Ken Burns is an acclaimed documentary film maker. His approach often involved filming photographs and slowly zooming in or out of the image to heighten the drama and add a bit of movement to a static image. He was namechecked by Movie editing software (such as Final Cut Pro and Windows Media Editor) and the "Ken Burns effect" soon became synominous with zoom/scale/pan transitions.

Using simple CSS we can markup an image to do the same thing. The image is simply wrapped in the class "fling-kb".

The HTML

Wrap your image in a div with the class "fling-kb".

<div class="fling-kb"><img src="/images/ken-burns.jpg" alt="" /></div>

The CSS

.fling-kb {overflow:hidden;margin-bottom: 5px;}

.fling-kb img {width: 100%;margin-left: 0px;position: relative;transition-property: all;transition-duration: 0.8s; transition-timing-function: ease-in-out;transition-delay: 0s;}

.fling-kb:hover img {transform: scale(1.2) rotate(2deg);}

The End Result

This CSS effect is included in the fling.css library and can be easily added to Joomla with the HD-FX plugin.