Responsive Slideshow with Ken Burns Effect + Captions

A responsive, cross-fading slideshow with CSS3 'Ken Burns' panning and zooming animation, and captions that sweep in from the bottom right corner.

Works in modern browsers and IE9+ (no effects in IE9). IE8 users will just see the first image.

Please view the source of this page for HTML markup, CSS and JS.

Every flower is a soul blossoming in nature.

When the flower blooms, the bees come uninvited.

The flower that smells the sweetest is shy and lowly.

Autumn is a second spring when every leaf is a flower.

Information about altering the pan and zoom amounts can be found in this forum thread at Dynamic Drive

Fullscreen Slideshow

The slideshow can be made to fill the screen by adding this CSS;


	html, body { height:100%; }

	#slideshow { width:100%; height:100%; }

And by removing this CSS;


	#slideshow { max-width:64em; padding-bottom:40%; }

The HTML markup should also be placed right after the opening <body> tag.

Did you find this useful? There are more demos and code snippets this way.