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.
View Image 1 - zooming image entrance
View Image 2 - fading image entrance
View Image 3 - side-sweeping image entrance
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.
View Image 4 - dropping image entrance
Related
- Responsive Modal Overlay/ Pop-up Image Viewer (Basic)
- Responsive Modal Overlay/ Pop-up Text Message with Entrance Effects
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.