CSS・HTML　Factory

HOME>ホバーキャプション７>ホバーキャプション８>ホバーキャプション９

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

キャプションエフェクト９

上下からスライドして画像をマスク

It's sheep !

画像にマウスホバー（上に乗せる）すると上下からスライドしてマスクがかかり、同時にキャプションも表示されます。実装にはHTMLとCSSを以下のように記述します。

ＨＴＭＬ

ＣＳＳ

.sample13 {
	width:			300px;
	height:			200px;
	overflow:		hidden;
	position:		relative;
}
.sample13 .caption {
	width:			100%;
	height:			100%;
	visibility:		hidden;	/* 文字を表示しない */
	font-size:		130%;
	color:			#fff;
	top:			0;
	left:			0;
	position:		absolute;
	text-align:		center;
	-webkit-transition:	all 0.4s step-end;
	transition:		all 0.4s step-end;
}
.sample13:hover .caption {
	visibility:		visible;	/* 文字を表示する */
}
.sample13 .caption p {
	font-size:		130%;
	padding-top:		75px;
	color:			#fff;
	opacity:		0;	/* ホバーが解除された時すぐ消えるように、文字を表示しない */
}
.sample13:hover .caption p {
	opacity:		1;	/* 文字を表示する */
}
.sample13 .mask1, .sample13 .mask2 {
	width:			100%;
	height:			50%;	/* 高さは半部のサイズ */
	position:		absolute;
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample13 .mask1 {
	top:			-50%;	/* 枠の上に置いて表示させない */
}
.sample13:hover .mask1 {
	top:			0;	/* 下にずらして表示する */
}
.sample13 .mask2 {
	bottom:			-50%;	/* 枠の下に置いて表示させない */
}
.sample13:hover .mask2 {
	bottom:			0;	/* 上にずらして表示する */
}

左右からスライドして画像をマスク

It's sheep !

画像にマウスホバー（上に乗せる）すると左右からスライドしてマスクがかかり、同時にキャプションも表示されます。実装にはHTMLとCSSを以下のように記述します。

ＨＴＭＬ

ＣＳＳ

.sample14 {
	width:			300px;
	height:			200px;
	overflow:		hidden;
	position:		relative;
}
.sample14 .caption {
	width:			100%;
	height:			100%;
	visibility:		hidden;	/* 文字を表示しない */
	font-size:		130%;
	position:		absolute;
	top:			0;
	left:			0;
	text-align:		center;
	-webkit-transition:	all 0.4s step-end;
	transition:		all 0.4s step-end;
}
.sample14:hover .caption {
	visibility:		visible;	/* 文字を表示する */
}
.sample14 .caption p {
	font-size:		130%;
	padding-top:		75px;
	color:			#fff;
	opacity:		0;	/* ホバーが解除された時すぐ消えるように、文字を表示しない */
}
.sample14:hover .caption p {
	opacity:		1;	/* 文字を表示する */
}
.sample14 .mask1, .sample14 .mask2 {
	width:			50%;	/* 幅は半部のサイズ */
	height:			100%;
	position:		absolute;
	top:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample14 .mask1 {
	left:			-50%;	/* 枠の左に置いて表示させない */
}
.sample14:hover .mask1 {
	left:			0px;	/* 左にずらして表示する */
}
.sample14 .mask2 {
	right:			-50%;	/* 枠の右に置いて表示させない */
}
.sample14:hover .mask2 {
	right:			0px;	/* 右にずらして表示する */
}

左からスライドして画像を押し出す

It's sheep !

画像にマウスホバー（上に乗せる）すると左からスライドしてマスクがかかり、同時にキャプションも表示されます。実装にはHTMLとCSSを以下のように記述します。

ＨＴＭＬ

ＣＳＳ

右からスライドして画像を押し出す

It's sheep !

画像にマウスホバー（上に乗せる）すると右からスライドしてマスクがかかり、同時にキャプションも表示されます。実装にはHTMLとCSSを以下のように記述します。

ＨＴＭＬ

ＣＳＳ

ページの先頭へ

キャプションエフェクト９

上下からスライドして画像をマスク

左右からスライドして画像をマスク

左からスライドして画像を押し出す

右からスライドして画像を押し出す

CSS・Factoy