オンマウス時に背景画像の上に半透明の色を重ねたい時のCSS設定
はじめに
「背景画像の上に半透明の背景色を重ねたい時のCSS設定」のページを作った時に、「オンマウス時に画像に半透明の色を重ねるという方法も紹介する」と書きましたので、その方法を紹介していきます。
簡単に説明すると、疑似要素で半透明の背景色を設定し、それをオンマウス時のみ表示するように設定すれば良いです。
仕上がりイメージ
「オンマウスでの変化」なので、リンクボタンでの作成を想定しました。
（ちなみに今回も京都の八坂神社へ行った時に撮影した物を使っています）
画像にマウスを合わせてください。
目次
リンクの大まかな全体像を作る
まずはリンクの大まかな全体像（背景画像の部分）を作ります。
今回はimageではなくbackgroundなので、display:block;として枠全体の大きさを設定します。
リンクボタンを作っていきますが、ボタン部分のデザインは次のステップで説明します。
HTML
<a href="#" class="sample01">詳しくはこちら</a>
CSS
.sample01 {
position: relative;
width: 240px;
height: 240px;
background: url("背景画像のURL") center center / cover;
color: #fff;
text-decoration: none;
}できあがったもの
これで外枠の背景画像が配置できましたが、さらにボタンをデザインするためにHTMLとCSSに手を加えていきます。
ボタン部分を作る
このままのHTMLだとボタン（「詳しくはこちら」の箇所）が作れないので、「詳しくはこちら」をspanで囲んだ上でCSSを設定します。
「テキストを上下中央に配置するCSS設定（5種類）」で紹介したことがあるのですが、リンクの枠内で上下中央にボタンを配置するためにCSSにdisplay:flexを追記します。
HTML
<a href="#" class="sample01"><span>詳しくはこちら</span></a>
CSS
.sample01 {
position: relative;
width: 240px;
height: 240px;
background: url("背景画像のURL") center center / cover;
color: #fff;
text-decoration: none;
display:flex;
align-items: center;
justify-content: center;
}
.sample01 span {
display: inline-block;
width: 200px;
line-height: 40px;
background: #338DC9;
border: 1px solid #ccc;
box-sizing:border-box;
box-shadow:2px 2px 0 rgba(0,0,0,.2);
text-align: center;
}できあがったもの
これで背景とボタンができましたので、次にオンマウス時の半透明の背景色を作っていきます。
これ以降HTMLは編集しないので割愛します。
半透明の背景色を作る
オンマウス時の背景色を作るには「景画像の上に半透明の背景色を重ねたい時のCSS設定」と同様に疑似要素:hoverで背景色を設定していきます。
さらに今回は「オンマウス時に背景色を重ねる」という想定なので:hoverも記載していきます。
背景色のカラーは透過度50％の黒rgba(0,0,0,.5)としました。
CSS（追記部分のみ）
sample01:hover:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,.5);
}できあがったもの
これでオンマウス時に背景色が重なるようになりました。
しかし、ボタン（青い所）の上にも重なってしまうため、オンマウス時のボタンが暗くなってしまいました。
背景色の重なりを調整してボタンに背景色が重ならないようにします。
オンマウス時の重なりを調整する
重なりを調整するにはz-indexを使います。
ボタンspanが疑似要素beforeより上に配置されるようにしたら良いので、span内に大きい数値のz-indexを設定すれば良いです。
CSS
.sample01 {
position: relative;
width: 240px;
height: 240px;
background: url("背景画像のURL") center center / cover;
color: #fff;
text-decoration: none;
display:flex;
align-items: center;
justify-content: center;
}
.sample01 span {
display: inline-block;
width: 200px;
line-height: 40px;
background: #338DC9;
border: 1px solid #ccc;
box-sizing:border-box;
box-shadow:2px 2px 0 rgba(0,0,0,.2);
text-align: center;
z-index: 2;
}
sample01:hover:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,.5);
z-index: 1;
}できあがったもの
これでオンマウス時に背景画像の上に背景色を重ねることができました。
せっかくなのでもう少しデザインに手を加えてみたいと思います。
おまけ
「背景色を左から右へスライドして表示させるCSS設定」のようにオンマウス時に下から上へ背景色がスライドして出てくるようなアニメーションを実装してみます。
詳しい設定は上記のページを見て頂きたいのですが、今回の場合だとsample01:hover:beforeの箇所にアニメーションを設定（追記）します。
簡単に説明するとオフマウス時はリンク枠外（Y軸で100%分下）に背景色を配置し、オンマウスでそれをリンク枠内（Y軸で0%の位置）に移動させることでアニメーションになります。
オフマウス時に背景色が枠の外に配置されるのでsample01にoverflow: hidden;を追記する必要があります。
CSS（追記のみ）
.sample01 {
～省略～
overflow: hidden; /* ここを追記 */
}
sample01:hover:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,.5);
z-index: 1;
animation-name: test_link_bg;
animation-duration:.2s;
animation-fill-mode: forwards;
@keyframes test_link_bg {
0% {
transform: translate(0,100%)
}
100% {
transform: translate(0,0)
}
}
}
