Demos & Snippets

Scroll Down Before/ After Effect Image Switcher | Created: 14th Feb 20
Scroll down the page to reveal a hidden image with this nifty before and after image switch effect. Change the CSS transition or animation to customise.

Responsive CSS3 Blinds Effect Slideshow | Created: 7th Aug 18
A CSS3 slideshow with blinds effect (like the one in WOW Slider), powered by a few lines of JS. Stacked media queries serve smaller images to mobile.

Img Src to Background-Image (object-fit:cover) | Created: 23rd Jun 16
Convert an img src attribute into a background-image with JS, so that background-size:cover can be applied. Polyfill for object-fit:cover in IE/ Edge.

Pop-up Image Viewer with Entrance Effects | Created: 27th May 16
A responsive, pop-up image with on-demand image loading. A spinner shows while loading, then an image zooms, fades, sweeps or drops in to view.

Responsive 'Ken Burns' Slideshow + Captions | Created: 5th Oct 15
A responsive, cross-fading slideshow with CSS3 'Ken Burns' panning and zooming animation, and captions that sweep in from the bottom right corner.

Responsive CSS3 Cross-Fading Slideshow | Created: 17th Jun 15
A simple cross-fade slideshow, powered with a few lines of JS. Stacked media queries serve smaller images to mobile. Retina image technique included.

Responsive CSS3 Fade-To-Black Slideshow | Created: 15th May 15
A basic fade-to-black slideshow, powered with a few lines of JavaScript. Images are pulled from a folder with PHP. For modern browsers and IE9+.

Responsive CSS3 Fullscreen 'Ken Burns' Slideshow | Created: 8th Mar 15
A responsive, fullscreen slideshow using CSS3 transforms to create a Ken Burns panning and zooming effect. A small JavaScript function handles timing.

Responsive Modal Overlay/ Pop-up Image Viewer | Created: 11th Jan 15
A responsive, pop-up image viewer with on-demand image loading. The modal overlay is triggered by a small JS function, and styled with CSS.

Responsive Fullscreen Image with Content Below | Created: 1st Dec 14
This fullscreen image always fills the initial viewport, regardless of device or screen size. Content is placed underneath for maximum visual impact.

CSS3 Grid Images - Fluid Scale, Responsive | Created: 24th Sep 14
A responsive grid of images that resize fluidly as screen size changes. Includes online calculator to easily calculate image margins and width % per row.

Responsive CSS3 Diamond Grid Images | Created: 28th Aug 14
Four demos for grids of images that are rotated 45 degrees; Two demonstrate fluid scaling, and two have images that overflow as the screen narrows.

3 Ways to Resize/ Scale Images in RWD | Created: 14th Aug 14
A look at visual image manipulation using fixed ratio, target ratio and fluid ratio techniques. Includes online calculator to calculate a 'sloping scale'.