This is an experimental flyout image slider. This image slider is a stack of some images and works by flying out the selected image to the front of images stack. We will use CSS3 transition, animation and transform for this animation and jQuery for helping us maintain click event, CSS transition and animation.

This image slider doesn’t do slide on displaying image, as I described before it will be flying out the selected image to the front of images stack. So all images will be positioned stacked each other. When user click on of the image, it will be move to the outer left of image stack and move back with rotating effect to the stack and positioned on top of it.

The HTML & Styling

The HTML structure is very simple, we need two divs for wrapping images and their description. The first div named itemlist and the other named itemdescription. Each of them has children, itemlist will have list of all images and the other will have list of all descriptions.

<div id="container">
  <div id="itemlist">
  	<img src="images/busby.jpg" alt="Busby" id="busby">
    <img src="images/gridly.jpg" alt="Gridly" id="gridly">
    <!-- to n image -->
  </div>
  <div id="itemdescription">
    <span data-for="busby">Busby Theme</span>
    <span data-for="gridly">Gridly Theme</span>
    <!-- to n description -->
  </div>
</div>

Read more：http://www.webstuffshare.com/2012/07/flyout-image-slider-using-jquery-css3/