問題 × 解決策

ロールオーバーで画像に透過した黒を被せる

問題

ロールオーバーで画像に透過した黒を被せるには?

解決策

aタグの疑似要素を「background-color: rgba(0,0,0,0.5);」に指定しておいてpositionで浮かせ、ロールオーバー時にopacityを1.0にして表示させる。

 

aタグの疑似要素を使用する。

画像を使ったリンクで、ロールオーバーすると透過した薄い黒が被さる挙動は、よく見かける手法です。
この透過した黒は、aタグの疑似要素を用いて実現させます。

DEMOはこちら

HTMLの構築

divタグで囲ったaタグを用意し、中に画像を配置します。

  • 便宜上、divタグにクラス「rolloverbkalpha」を設定しています。
<div class="rolloverbkalpha">
	<a href="#">
		<img src="http://keylopment.com/_cms/wp-content/uploads/2019/12/paddingtop.jpg" width="800" height="400" alt="">
	</a>
</div>

CSSの構築

クラス「rolloverbkalpha」内のaタグ、aタグの疑似要素に対し、CSSを設定します。

  • 今回は例として、aタグのbeforeに指定を行います。
.rolloverbkalpha{
	text-align: center;
}
.rolloverbkalpha a{
	display: inline-block;
	line-height: 0;
	position: relative;
}
.rolloverbkalpha a:before{
	content: "";
	display: block;
	background-color: rgba(0,0,0,0.5);
	opacity: 0.0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	transition-duration: 0.3s;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
}
.rolloverbkalpha a:hover:before{
	opacity: 1.0;
}

ポイント!

  • 「position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;」により、親、先祖要素で同じくpositionを設定(static以外)している要素と同じ幅、高さまで引き伸ばされます。
  • そしてopacityを0から1に変える際、「transition-duration: 0.3s;」により、ゆっくりと暗くすることができます。

通常時

ロールオーバー時

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eight − 6 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧