A Ken Burns effect with CSS

This article was first published on css-101.org (08-08-2011).

The Ken Burns effect is a popular name for a type of panning and zooming effect used in video production from still imagery.
The name derives from extensive use of the technique by American documentarian Ken Burns.


Images from The Commons

Browser support

In IE, the above demo behaves as a simple slideshow with no transition while in modern browsers it works as expected, with WebKit-based browsers showing much better “panning” ability.


My goal was to offer an out-of-the-box solution. So I kept things simple, but at the end of this article I show how to edit the script to offer more control on a per image basis.

You should be able to create the above effect by simply copying the following markup, CSS and script to your page.


The name and number of images do not matter, but for the script to find your slideshow, the id of the container must be #slideshow.

<div id="slideshow">
    <img src="01.jpg"
    <img src="02.jpg"
    <img src="03.jpg"
    <img src="04.jpg"
    <img src="05.jpg"
    <img src="06.jpg"


Styling the container

position is used to make this box a containing block (it becomes a reference for its absolutely positioned children). overflow will hide part of the images moving outside of the box.

#slideshow {
    position: relative;
    width: 240px;
    height: 160px;
    overflow: hidden;
    border: 8px solid #fff;

Styling the images

position:absolute is to put all images in a stack. Dimensions are set to increase the size of these images so their edges do not appear in the parent box when we move them inside the said box.

Because the images are now larger than their parent container, we use top, left and margin values to align them in the center of the box.

Finally, we set the transition [1] (property and duration). Note that duration values are different for opacity and transform as we want the “fade-in” effect to be faster than the “panning” effect.

#slideshow img {
    max-width: none;
    transition-property: opacity, transform;
    transition-duration: 3s, 8s;

We change the point of origin [1] using four corners so images do not move in the same direction. This technique allows us to create various paths while applying the same translate() values to all images (see the ‘fx’ class further below).

#slideshow img  {
    transform-origin: bottom left;
#slideshow :nth-child(2n+1) {
    transform-origin: top right;
#slideshow :nth-child(3n+1) {
    transform-origin: top left;
#slideshow :nth-child(4n+1) {
    transform-origin: bottom right;

Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one. The rule below moves all images past the second one down the stack. This is because the second image needs to show on top of the first one when it transitions in.

#slideshow .fx:first-child + img ~ img  {

Because images are styled with a different point of origin, the following rule will create different panning effects.

#slideshow .fx {
    transform: scale(1.5) translate(30px);


The idea is to cycle through the images to apply the “fx” class to them every n seconds. We can’t simply set and remove that class though, because that would make the previous image move back into its original position while the new one fades in. We need to keep the class on two images at a time (the two that are involved in the transition).

function() {
    // we set the 'fx' class on the first image
    // when the page loads
    document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
    // this calls the kenBurns function every
    // 4 seconds. You can increase or decrease
    // this value to get different effects
    window.setInterval(kenBurns, 4000);
    // the third variable is to keep track of
    // where we are in the loop
    // if it is set to *1* (instead of 0)
    // it is because the first image is styled
    // when the page loads
    var images          = document.getElementById('slideshow').getElementsByTagName('img'),
        numberOfImages  = images.length,
        i               = 1;
    function kenBurns() {
        if(i==numberOfImages){ i = 0;}
        images[i].className = "fx";
        // we can't remove the class from the previous
        // element or we'd get a bouncing effect so we
        // clean up the one before last
        // (there must be a smarter way to do this though)
        if(i===0){ images[numberOfImages-2].className = "";}
        if(i===1){ images[numberOfImages-1].className = "";}
        if(i>1){ images[i-2].className = "";}

CSS and JS files

Include the content of the CSS file inside a style block in the head of your document and put the content of the script file inside a script block at the end of your document (before </body>).


You can take advantage of the variable (i) to style the images with different classes. For example, you could replace this line of the kenBurns function:

images[i].className = "fx";

with this one:

images[i].className = "fx-"+i;

and then you could use rules like these [1]:

.fx-0 {
    transform: scale(1.2) translate(20px,50px);
.fx-1 {
    transform: scale(1.5) translate(30px,10px);


Thanks to @divya for spotting a typo in my transform declaration.

  1. kenburns.css includes vendor prefixes.