Responsive CSS3 Modal Gallery (no JavaScript)

This is version 1. Also see all other versions to see how this gallery evolved.

Click on an image below to bring the gallery to life (and resize the browser window for slinky responsiveness)...


A CSS-only, responsive image gallery that;

Please view the source of this web page to grab the CSS and HTML markup.




* The :target selector is not supported in IE7/8 but a bit of markup-mashing with IE conditional comments provides a workaround so those users can open image enlargements in a new browser window instead of the modal overlay/lightbox.

        <!--[if gte IE 9]><!--><a href="#pic-1"><!--<![endif]-->
        <!--[if lte IE 8]><a href="/path/to/big/image.jpg" target="_blank"><![endif]-->
           <img src="/path/to/small/thumb.jpg" width="252" height="160" alt="" />

* IE7/8 users will not see the magnifying glass icon when they hover over a thumbnail. However, there is fallback for a plain "Preview" bar that they will see instead.

I haven't been able to test in other browsers/devices but feedback is always welcome. Contact me if you spot anything hinky.


Inspired by the "CSS3 Modal Popups" tutorial at Script Tutorials.



Looking for more freebies for your website? Grab a bunch of free PHP, CSS and JavaScript goodies, from flat file CMS' to RSS managers to responsive CSS menus, galleries and sliders.