画像をhoverしたら黒いマスクかけてテキストを表示させたいけどどうしたらいい？
これは実務でも良くあるので、必ず出来るようにしておきましょう。
hoverしたら背景に透過させた黒いマスクをかけテキストを表示させる方法
まずはHTMLから見ていきます。
<div class="img-wrapper">
<img src="画像パス" alt="">
<div class="hover-mask">
<p>
テキストが入ります。
</p>
</div>
</div>次にCSSです。
.img-wrapper {
cursor: pointer;
max-width: 500px;
position: relative;
width: 100%;
}
.img-wrapper img {
height: auto;
width: 100%;
}
.hover-mask {
align-items: center;/* テキストの中央揃え */
background: rgba(0, 0, 0, .5);/* マスクの色(黒の50%) */
bottom: 0;
color: #fff;/* テキストの色 */
display: flex;/* テキストの中央揃え */
height: auto;
justify-content: center;/* テキストの中央揃え */
left: 0;
opacity: 0;/* 最初は透明（非表示） */
position: absolute;
right: 0;
top: 0;
transition: opacity .6s ease;/* ゆっくりopacityのみへ変化させる */
width: 100%;
}
.hover-mask:hover {
opacity: 1;/* hoverしたら透過しない(表示させる) */
}
.hover-mask p {
width: 80%;/* テキストを横幅いっぱいにならないようにする */
}基本的にはコピペして貰えれば使えますが、画像のサイズ、テキストの幅などは適宜変更して下さい。
こちらがデモになります。
See the Pen
画像にマスク by junpei (@junpei-sugiyama)
on CodePen.
テキストは最初から表示させる場合
次はテキストは最初から表示させたい場合です。
実務ではこちらの方がよく使う気がします。
コードは先ほどと少し異なります。
<div class="img-wrapper">
<img src="画像パス" alt="">
<p>
テキストが入ります。
</p>
</div>.img-wrapper {
cursor: pointer;
max-width: 500px;
position: relative;
width: 100%;
}
.img-wrapper img {
height: auto;
width: 100%;
}
.img-wrapper::before {
background: rgba(0, 0, 0, .5);/* マスクの色(黒の50%) */
bottom: 0;
content: '';
height: auto;
left: 0;
opacity: 0;/* 最初は透明（非表示） */
position: absolute;
right: 0;
top: 0;
transition: opacity .6s ease;/* ゆっくりopacityのみへ変化させる */
width: 100%;
}
.img-wrapper:hover::before {
opacity: 1;/* hoverしたら透過しない(表示させる) */
}
.img-wrapper p {
align-items: center;/* テキストの中央揃え */
bottom: 0;
color: #fff;/* テキストの色 */
display: flex;/* テキストの中央揃え */
justify-content: center;/* テキストの中央揃え */
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 80%;/* テキストを横幅いっぱいにならないようにする */
}
今回はマスクは擬似要素を使っています。
それに伴いマスクのdivタグはないので、pタグをposition: absolute;で画像の中央に配置しています。
こちらがデモになります。
See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.
以上になります。