← All elements
<input type="checkbox" id="lb"><label for="lb" class="th"></label><label for="lb" class="ov"><span class="big">Full size</span></label>About this layout
A thumbnail that opens a full-size overlay and closes again, switched by a hidden checkbox and a scale transition.
How it works
A hidden checkbox tracks whether the preview is open. The thumbnail is a label for it with a zoom-in cursor, and the overlay is another label so clicking anywhere closes it. When checked, the overlay fades in and the large panel scales from 0.6 to full size with a springy easing.
Ways to customise it
- Replace the gradients with your own artwork.
- Change the backdrop colour #000d to a lighter or darker veil.
- Adjust the large panel width and height.
Good to know
This is a visual pattern, so it does not trap focus or close on Escape. For photo galleries use the native dialog element with script. Always give images alternative text in a real gallery.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.