マウスホバーで文字を横から登場させる！

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

本日は前回に引き続き

マウスホバーで画像の上に文字を出すやり方2
画像にリンクを付けたはいいがもう少しかっこよくしたい！！
というときに使ってみたいエフェクトです。
今回はマスクが掛かり、横からスライドで登場します。

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

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;	/* 右にずらす */
}

おしゃれに出来ます