[CSS]円形エレメントの実装とホバー時に面白いアニメーションのエフェクトを与えるスタイルシート

最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトをCSS3アニメーションで実装するチュートリアルを紹介します。

Circle Hover Effects with CSS Transitions
右：ホバー時のアイテム、左：通常時のサムネイルの状態です。

• 円形エレメントの実装
• ホバーエフェクトのデモ

円形エレメントの実装

まずはベースとなる円形エレメントの実装です。
アイテム時を例に紹介します。

HTML

各円形のエレメントはリスト要素で、見出しやパラグラフをdiv要素で二重に内包します。

<ul class="ch-grid">
	<li>
		<div class="ch-item ch-img-1">
		<div class="ch-info">
		<h3>見出し</h3>
		<p>パラグラフ <a href="http://">リンク</a></p>
		</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img-2">
		<div class="ch-info">
		<h3>見出し</h3>
		<p>パラグラフ <a href="http://">リンク</a></p>
		</div>
		</div>
	</li>
</ul>

CSS

円形のベースとなるスタイルで、ホバー時に表示されます。
サムネイルは背景画像として表示します。

.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 20px;
}

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	cursor: default;
	box-shadow:
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
}
.ch-info {
	position: absolute;
	background: rgba(63,147,147, 0.3);
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	opacity: 1;
}

ホバーエフェクトのデモ

各デモはIEを除く、Firefox, Chrome, Safari, Operaでご覧ください。
また、個々のスタイルシートは元記事をご覧ください。

キャプチャは左：通常時のサムネイル、右：ホバー時のアイテム、の状態です。

Demo 1

ホバー時にアニメーションで拡大しながら、アイテムを表示します。

Demo 2

ホバー時にアニメーションでbox-shadowを円いっぱいにし、アイテムの背景として表示します。

Demo 3

ホバー時にアニメーションで上部の円形エレメントを回転させ、アイテムを表示します。

Demo 4

ホバー時にアニメーションで円の中心部を3D回転させ、アイテムを表示します。

Demo 5

ホバー時にアニメーションでサムネイルを縮小し、アイテムをフェードインで表示します。

Demo 6

ホバー時にアニメーションでサムネイルをひっくり返し、アイテムをフェードインで表示します。

Demo 7

ホバー時にアニメーションでサムネイルとアイテムを立方体のように回転させます。