CSS・HTML　Factory

ＣＳＳを使って作成するキャプションエフェクトを紹介しています。
メニューやバナーなどに使えたら嬉しいです。
コピペするだけですので、そんなに難しくないと思います。

マウスが上に乗るとマスクがかかる

マウスオンで扉がしまるような表示

画像にマウスオーバーするとまず画像全体に扉が閉まるような感じでマスクが被り、その後少し遅れてキャプションが表示されるものです。実装にはHTMLとCSSを以下のように記述します。

ＨＴＭＬ

ＣＳＳ

figure {
	position: relative;
	width: 300px;
	-webkit-perspective: 1500px;
	perspective: 1500px;
	-webkit-perspective-origin: 0 50%;
	perspective-origin: 0 50%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
figure div {
	overflow: hidden;
}
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0;
	transform-origin: 0;
	-webkit-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transition: -webkit-transform .4s, opacity .1s .3s;
	transition: transform .4s, opacity .1s .3s;
	opacity: 0;
}
figcaption h3,
figcaption p {
	text-align: left;
	-webkit-transition: opacity .3s;
	transition: opacity .3s;
	opacity: 0;
}
figure:hover figcaption {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	-webkit-transition: -webkit-transform .4s, opacity .1s;
	transition: transform .4s, opacity .1s;
	opacity: 1;
}
figure:hover figcaption h3,
figure:hover figcaption p {
	-webkit-transition-delay: .4s;
	transition-delay: .4s;
	opacity: 1;
}

マウスオンで全体がフリップ

画像にマウスオーバーするとフリップされてキャプションが表示されるものです。実装にはHTMLとCSSを以下のように記述します。

ＨＴＭＬ

ＣＳＳ

マウスオンで下から少しだけ表示

画像にマウスオーバーすると下から少しだけマスクとキャプションを表示させます。実装にはCSSを以下のように記述します。

ＨＴＭＬ

ＣＳＳ

マウスオンでキャプション非表示

こちらは今までのものとは違ってキャプションが予め表示されており、画像にマウスオーバーするとキャプションが隠れるというものになります。実装にはCSSを以下のように記述します。

ＨＴＭＬ

ＣＳＳ

マウスオンで上下から少しだけ表示

画像にマウスオーバーすると上下から少しだけマスクとキャプションを表示させるもので、今回の場合は上からはh3を、下からpを表示させています。実装にはCSSを以下のように記述します。

ＨＴＭＬ

ＣＳＳ

ページの先頭へ

マウスが上に乗るとマスクがかかる

マウスオンで扉がしまるような表示

マウスオンで全体がフリップ

マウスオンで下から少しだけ表示

マウスオンでキャプション非表示

マウスオンで上下から少しだけ表示

CSS・Factory