CSS3で実装されたサムネイルホバー効果

<ヘッダー>
		<h1><em>CSS3</em> を使用したサムネイルのホバー効果</h1>
	</ヘッダー>
	<div class="wrapper">
		<div class="ギャラリー">
			<ul>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/9.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/2.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/3.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/1.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/4.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/5.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/7.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/8.png"></li>
				<li><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/6.png"></li>
			</ul>
		</div>
		<p class="attribution">このデモで使用されている画像は、<a href="https://d.hatena.ne.jp/koochinko">Mernan Behairi</a> の作品です。<a href="https://twitter.com/SohTanaka">@Sohtanaka</a> の古い投稿からインスピレーションを得ています。もともと jQuery を使用しています。オリジナルの <a href="https://web.archive.org/web/20110323065449/http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/">チュートリアル</a> と <a href="https://web.archive.org/web/20110323065952/http://www.sohtanaka.com/web-design/examples/image-zoom/">デモ</a> をご覧ください。</p>
	</div>

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);

html、body、div、span、アプレット、オブジェクト、iframe、
h1、h2、h3、h4、h5、h6、p、blockquote、pre、
a、略語、頭字語、アドレス、big、cite、コード、
del、dfn、em、img、ins、kbd、q、s、samp、
小さい、ストライク、強い、サブ、sup、tt、var、
b、u、i、センター、
dl、dt、dd、ol、ul、li、
フィールドセット、フォーム、ラベル、凡例、
表、キャプション、tbody、tfoot、thead、tr、th、td、
記事、余談、キャンバス、詳細、埋め込み、 
図、図キャプション、フッター、ヘッダー、hgroup、 
メニュー、ナビゲーション、出力、ルビー、セクション、概要、
時間、マーク、オーディオ、ビデオ {
	マージン: 0;
	パディング: 0;
	境界線: 0;
	フォントサイズ: 100%;
	フォント: 継承;
	垂直位置合わせ: ベースライン;
}

体 {
	背景色: #f2f2f2;
}

ヘッダー {
	幅: 100%;
	背景色: #77cdb4;
	テキスト配置: 中央;
}

h1 {
	フォントファミリー: 'Roboto Condensed'、サンセリフ;
	色: #FFF;
	フォントサイズ: 2.3em;
}

えむ {
	色: #232027;
}

.ラッパー{
	幅: 40%;
	マージン: 40px 自動;
}

div.ギャラリー{
	上マージン: 30px;
}

div.ギャラリー ul {
	リストスタイルタイプ: なし;
	左マージン: 35px;
}

/* アニメーション */
div.gallery ul li、div.gallery li img {
	-webkit-transition: すべて 0.1 秒のイーズインアウト;
  	-moz-transition: すべて 0.1 秒のイーズインアウト;
  	-o-transition: すべて 0.1 秒のイーズインアウト;
  	遷移: すべて 0.1 秒のイーズイン アウト。
}

div.gallery ul li {
	位置: 相対的;
	フロート: 左;
	幅: 130ピクセル;
	高さ: 130px;
	マージン: 5px;
	パディング: 5px;
	zインデックス: 0;
}

/* ホバー時に z-index が高くなるようにします */
/* ホバー画像が他の画像と重なっていることを確認する */
div.gallery ul li:hover {
	zインデックス: 5;
}

/* 画像は li の下に適切に配置されます */
div.gallery ul li img {
	位置: 絶対;
	左: 0;
	上: 0;
	境界線: 1px 実線 #dddddd;
	パディング: 5px;
	幅: 130ピクセル;
	高さ: 130px;
	背景: #f0f0f0;
}

div.gallery ul li img:hover {
	幅: 200ピクセル;
	高さ: 200px;
	上マージン: -130px;
	左マージン: -130px;
	上位: 65%
	左: 65%;
}

p.属性 {
	フォントファミリー: 'Consolas';
	色: #000;
	クリア: 両方;
	テキスト配置: 中央;
	行の高さ: 25px;
	パディング上部: 30px;
}

p.属性 a {
	色: #4c8d7c;
}

/* レスポンシブハック */
@media 画面のみで (最小幅: 499px) かつ (最大幅: 1212px) {
	.ラッパー{
		幅: 500ピクセル;
	}
}

@media 画面のみ (最大幅: 498px) {
	.ラッパー{
		幅: 300ピクセル;
	}

	div.ギャラリー ul {
		リストスタイルタイプ: なし;
		マージン: 0;
	}
}