上下から閉まるようにマスクと文字が出現

ホームページ作成教室, 画像編集

本日は前回に引き続き

マウスホバーで画像の上に文字を出すやり方2
画像にリンクを付けたはいいがもう少しかっこよくしたい!!
というときに使ってみたいエフェクトです。
今回は上下から閉まるようにマスクと文字が出現します。

HTMLとCSSに以下の記述をしてみましょう

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;	/* 上にずらして表示する */
}
フルーツ寄せ集め

It’s fresh !

おしゃれに出来ます