Responsive Modal Overlay/ Pop-up Image Viewer with Entrance Effects

Larger images are loaded on-demand with the help of a line of JavaScript that switches the img tag's "data-src" attribute to "src" (replacing a base64 placeholder image) when the links are clicked. And because the images are not downloaded when the page is first viewed, you get a faster page load and a welcome performance boost.

A spinner animation shows while each image is loading, then the image reveals itself with a CSS3 keyframe animation effect; zoom, fade, side-sweep or drop.

Works in modern browsers and IE8+ (no animation effects in IE8/9).

View the source of this page to see the HTML markup, CSS and JS.

Fullscreen 'click-to-close' Trigger

The whole of the modal overlay for this demo is a 'click-to-close' trigger, not just the small (×) at the top of the screen.


More demos and snippets

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