これはcssのみのマウスホバーエフェクトで、画像をマスクしてその上に文字列(キャプション)を表示します。今回は割とシンプルな動きのあるものを13種類作成しましたので書き留めておきます。

スポンサーリンク

サンプル

下のサンプルをクリックすると、ソースの行にジャンプします。



1.画像をマスクして文字を表示

フルーツ寄せ集め
It's fresh !

html


<div class="sample1">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample1 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;	/* 相対位置指定 */
}
.sample1 .caption {
	font-size:		130%;
	text-align: 		center;
	padding-top:		80px;
	color:			#fff;
}
.sample1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.sample1:hover .mask {
	opacity:		1;	/* マスクを表示する */
}

2.画像をマスクして上から文字がスライド

フルーツ寄せ集め
It's fresh !

ホバー時にpaddingのtopを増やして下にスライドするように見せています。

html


<div class="sample2">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample2 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample2 .caption {
	font-size:		130%;
	text-align: 		center;
	color:			#fff;
}
.sample2 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.sample2:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-top:		80px;	/* ホバーで下にずらす */
}

3.画像をマスクして左から文字がスライド

フルーツ寄せ集め
It's fresh !

ホバー時にpaddingのleftを増やして下にスライドするように見せています。

html


<div class="sample3">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample3 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample3 .caption {
	font-size:		130%;
	color:			#fff;
	padding-top:		80px;
	padding-left:		0px;
}
.sample3 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.sample3:hover .mask {
	opacity:		1;	/* マスクを表示する */
	padding-left:		90px;	/* 右にずらす */
}

4.画像をマスクして文字が拡大

フルーツ寄せ集め
It's fresh !

ホバー時にtransform:scaleを使用して2倍に拡大しています。

html


<div class="sample4">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample4 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample4 .caption {
	font-size:		130%;
	text-align: 		center;
	color:			#fff;
	padding-top:		80px;
}
.sample4 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.4s ease-out;
	transition:		all 0.4s ease-out;
}
.sample4:hover .mask {
	opacity:		1;	/* マスクを表示する */
	-webkit-transform:	scale(2);	/* 2倍に拡大 */
	transform:		scale(2);
}

5.中心から画像をマスク

フルーツ寄せ集め
It's fresh !

最初にtransform:scale(0)を設定して、ホバー時にtransform:scale(1)にして元の大きさに戻しています。

html


<div class="sample5">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample5 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample5 .caption {
	font-size:		130%;
	color:			#fff;
	padding-top:		80px;
	padding-left:		100px;
}
.sample5 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
	-webkit-transform:	scale(0);	/* 大きさを0にして表示しない */
	transform:		scale(0);
}
.sample5:hover .mask {
	-webkit-transform:	scale(1);	/* 大きさを1にして表示する */
	transform:		scale(1);
}

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

フルーツ寄せ集め
It's fresh !

最初topをマイナスの値に設定して、ホバー時に0に戻しています。

html


<div class="sample6">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample6 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample6 .caption {
	font-size:		130%;
	color:			#fff;
	padding-top:		80px;
	padding-left:		100px;
}
.sample6 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			-100%;	/* 枠の上に置いて表示させない */
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.sample6:hover .mask {
	top:			0;	/* 下に降りてくるように見せる */
}

7.縦に180度回転して画像をマスク

フルーツ寄せ集め
It's fresh !

最初にtransform:rotateX(-180deg)で、ひっくり返しておいて、ホバー時に元に戻しています。

html


<div class="sample7">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample7 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample7 .caption {
	font-size:		130%;
	color:			#fff;
	text-align: 		center;
	padding-top:		80px;
}
.sample7 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* 表示させない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transform:	rotateX(-180deg);
	transform:		rotateX(-180deg);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.sample7:hover .mask {
	-webkit-transform:	rotateX(0deg);
	transform:		rotateX(0deg);
	opacity:		1;	/* ホバーで表示する */
}

8.横に180度回転して画像をマスク

フルーツ寄せ集め
It's fresh !

最初にtransform:rotateY(-180deg)で、ひっくり返しておいて、ホバー時に元に戻しています。

html


<div class="sample8">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample8 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample8 .caption {
	font-size:		130%;
	color:			#fff;
	text-align: 		center;
	padding-top:		80px;
}
.sample8 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* 表示させない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transform:	rotateY(-180deg);
	transform:		rotateY(-180deg);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.sample8:hover .mask {
	-webkit-transform:	rotateY(0deg);
	transform:		rotateY(0deg);
	opacity:		1;	/* ホバーで表示する */
}

9.横に360度回転して画像をマスク

フルーツ寄せ集め
It's fresh !

ホバー時にtransform:rotateY(360deg)で360度回転しています。

html


<div class="sample9">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample9 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample9 .caption {
	font-size:		130%;
	color:			#fff;
	text-align: 		center;
	padding-top:		80px;
}
.sample9 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* 表示させない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.sample9:hover .mask {
	-webkit-transform:	rotate(360deg);
	transform:		rotate(360deg);
	opacity:		1;	/* ホバーで表示する */
}

10.上からスライドして画像を押し出す

フルーツ寄せ集め
It's fresh !

最初にtransform:scale(1.2);で、画像を1.2倍の大きさにして、ホバー時に通常サイズに戻して、下に50ピクセルずらしています。

html


<div class="sample10">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample10 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample10 .caption {
	font-size:		130%;
	color:			#fff;
	padding-top:		10px;
	text-align: 		center;
}
.sample10 .mask {
	width:			100%;
	height:			50px;
	position:		absolute;
	top:			-50px;	/* 枠の上に置いて表示しない */
	left:			0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample10:hover .mask {
	top:		0px;	/* 下に降りてくるように見せる */
}
.sample10 img {
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
	-webkit-transform:	scale(1.2);	/* 1.2倍の大きさで表示 */
	transform:		scale(1.2);
}
.sample10:hover img {
	margin-top:		50px;			/* 画像の絵を下にずらす */
	-webkit-transform:	scale(1);	/* 元の大きさに戻す */
	transform:		scale(1);
}

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

フルーツ寄せ集め
It's fresh !

最初にマスクを表示させないようにして、ホバー時に左に画像半分ずらしています。

html


<div class="sample11">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
</div>

css


.sample11 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample11 .caption {
	font-size:		130%;
	color:			#fff;
	padding-top:		80px;
	padding-left:		20px;
}
.sample11 .mask {
	width:			50%;	/* 画像の半分の大きさにする */
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	margin-left:		-50%;	/* 枠の左に置いて表示させない */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample11:hover .mask {
	margin-left:		0px;	/* 右にずらして表示する */
}
.sample11 img {
	-webkit-transition:	all 0.4s ease;
	transition:		all 0.4s ease;
}
.sample11:hover img {
	margin-left:		50%;	/* 画像を半分サイズ、右にずらす */
}

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

フルーツ寄せ集め

It's fresh !

マスクを上用と下用の2つ用意します。最初に文字は表示しないようにして、マスクされた後に表示するようにしています。文字の表示は、イージングをstep-endにしています。

html


<div class="sample12">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask1"></div>
	<div class="mask2"></div>
	<div class="caption">
		<p>It's fresh !</p>
	</div>
</div>

css


.sample12 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample12 .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;
}
.sample12:hover .caption {
	visibility:		visible;	/* 文字を表示する */
}
.sample12 .caption p {
	font-size:		130%;
	padding-top:		75px;
	color:			#fff;
	opacity:		0;	/* ホバーが解除された時すぐ消えるように、文字を表示しない */
}
.sample12:hover .caption p {
	opacity:		1;	/* 文字を表示する */
}
.sample12 .mask1, .sample12 .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;
}
.sample12 .mask1 {
	top:			-50%;	/* 枠の上に置いて表示させない */
}
.sample12:hover .mask1 {
	top:			0;	/* 下にずらして表示する */
}
.sample12 .mask2 {
	bottom:			-50%;	/* 枠の下に置いて表示させない */
}
.sample12:hover .mask2 {
	bottom:			0;	/* 上にずらして表示する */
}

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

マスクを左用と右用の2つ用意します。最初に文字は表示しないようにして、マスクされた後に表示するようにしています。文字の表示は、イージングをstep-endにしています。

フルーツ寄せ集め

It's fresh !

html


<div class="sample13">
	<img src="./fruit.jpg" alt="フルーツ寄せ集め" />
	<div class="mask1"></div>
	<div class="mask2"></div>
	<div class="caption">
		<p>It's fresh !</p>
	</div>
</div>

css


.sample13 {
	width:			280px;
	height:			188px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;
}
.sample13 .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;
}
.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:			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;
}
.sample13 .mask1 {
	left:			-50%;	/* 枠の左に置いて表示させない */
}
.sample13:hover .mask1 {
	left:			0px;	/* 左にずらして表示する */
}
.sample13 .mask2 {
	right:			-50%;	/* 枠の右に置いて表示させない */
}
.sample13:hover .mask2 {
	right:			0px;	/* 右にずらして表示する */
}

長いのを読んでいただき、ありがとうございます。 次は少し凝ったものを作成したいと思っています。