Responsive CSS3 Blinds Effect Slideshow (<img> tags)
A CSS3 slideshow with blinds effect (similar to the one in WOW Slider), powered by a few lines of JavaScript. Each slide is a combination of three standard <img> tag.
It uses one set of images. Here's a demo using background-images and media queries to serve smaller images to mobile.
Works in modern browsers and IE9+ (no blinds effect in IE9). IE8 users will just see the first image.
Please view the source of this page for HTML markup, CSS and JS.
How it Works
Each slide is made up of 3 container elements, showing the first, middle, and last third of the image side-by-side so that it appears to be a single image. The containers animate in, in turn, and at the same time, the left margin of each image moves across slightly to create the overall blinds effect.
Related
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.