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

サイト構築 -CSS

Post on:2012年8月10日

sponsorsr

最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトを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;
}