画像をhoverしたときに黒いマスクをかけるにはどうしたらいいの？
そんな疑問にお答えします。
hoverしたら背景に透過させた黒いマスクがかかるエフェクトってよく見かけます。
その実装方法を見ていきましょう。
hoverしたら背景に透過させた黒いマスクをかける
今回の完成形はこちらです。
よく見るエフェクトだと思います。
それではコードを見ていきましょう。
See the Pen
hoverしたら黒いマスクエフェクト1 by toshi (@toshi78)
on CodePen.
コード解説
はじめに作り方の大まかな流れを把握しておきましょう。
💡ポイント！
- 黒いマスクは疑似要素で表現する
- 最初は「opacity: 0;」で非表示にしておく
- hoverしたら「opacity: 1;」で表示させる
- 「transition」で動きをなめらかに
黒いマスクを疑似要素で表現する方法はこちらの記事で解説しています。
.picture::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.3);
opacity: 0;
transition: all 0.3s;
}親要素に「position: relative;」、疑似要素に「position: absolute;」とし、top: 0;、left: 0;、right: 0;、bottom: 0; で黒いマスクでぴったりと画像を覆います。
background-color: rgba(0,0,0,0.3);を指定することによって半透明にしています。
あとはこのマスクを非表示↔表示に切り替えるように記述すればいいわけです。
ですのでまず「opacity: 0;」で非表示にしておきます。
「transition」もこちらに指定しておきましょう。
.picture:hover::before {
opacity: 1;
}最後にhoverしたときの指定をします。
ここでの記述は「:hover::before」の順番です。
「::before:hover」だと効きませんので注意しましょう。
「opacity: 1;」と指定することで表示させることができます。
黒いマスクの作り方さえ分かれば、案外簡単にできるのではないでしょうか。
一度理解できればあとは使いまわせるので、次回からのコーディングはスピードアップできますね。
投稿者 トシ
コメントを残す