JavaScript無しでCSSのみで実現するlightbox [CSS]

作成方法は、下記のサンプルソースを参考にすればいとも簡単に作れます。

XHTML

<a href="#futurebox_img1">
	<img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" />
</a>
 
<div class="overlay" id="futurebox_img1">
	<a href="#close" title="Close future box">
		<img src="gr_cssninja_lrg.png" alt="The Css Ninja" width="600" height="639" />
	</a>
</div>

CSS

html, body { height: 100%; }
 
.overlay
{
	width: 100%;
	height: 100%;
	position: absolute; 
	top: 0; 
	left: 0; 
	display: none; 
	z-index: 999;
	background: rgba(0,0,0,0.7);
}
	.overlay a
	{
		display: table-cell; 
		vertical-align: middle; 
		text-align: center;
	}
		.overlay_container img
		{
			background: #ffffff;
			padding: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}
 
.overlay:target { display: table; }

JavaScript無しなので、アニメーションは実現できませんが、JSオフ環境にもlightboxというコンセプトが実現できます。

また、関連記事として下記もどうぞ！

CSSだけで作るLightbox風のポップアップウィンドウ[CSS]