リンクホバーで透過させずにボタンや画像を光らせる方法

Webサイトのボタンや画像等にマウスカーソルが乗った際に、要素の見た目に変化を加える事が出来るホバーアクション。

特にリンク用のボタンや画像は、Webサイトの閲覧者に「ここはクリックできるよ！」と知らせるための目印としてホバーアクションが使われることが多いですよね。

その中でも特に使われるのがopacityプロパティを用いた以下のホバーアクションでは無いでしょうか。

<a href="#">カーソルを乗せたら光るよ！</a>

a {
    display: inline-block;
    padding: 3px 10px;
    background-color: #23395B;
    color: #FFF;
    border-radius: 5px;
    text-decoration: none;
}

a:hover {
    opacity: 0.7; /*値は0〜1まで指定可能。0に近いほど透明度が高い。*/
}

カーソルを乗せたら光るよ！

「opacity」は要素を透過することが出来るプロパティですが、これをマウスホバー時「opacity: 0.7;」となるよう指定することで、カーソルが乗った際にボタンが光ったように見えています。

ただしこの手法は一つだけ弱点があります。

カーソルを乗せたら光るよ！

背景が明るめの色かつ無地の時でないと、上の2つのボタンのように背景の色や柄の影響を受けてしまい、かっこ悪くなってしまうのです。

ということで、カーソルホバー時に背景の影響を受けずにボタンや画像を光らせる事ができる方法を以下でご紹介します。

リンクホバーで透過させずにボタンや画像を光らせる方法

考え方としては、光らせたい要素自体を透過すると背景が見えてしまうので、カーソルホバーした際に白い半透明の要素を上に被せることで光ったように見せます。

上の説明だけだとピンと来ないかもしれませんが、以下で先程作成したボタンを修正してみますので、一緒にコードの内容を見てみましょう。

<a href="#">カーソルを乗せたら光るよ！</a>

a {
    display: inline-block;
    padding: 3px 10px;
    background-color: #23395B;
    color: #FFF;
    border-radius: 5px;
    text-decoration: none;
    position: relative; /* 追加 */
}

a::before { /* ボタンと同じサイズの白い半透明の疑似要素beforeを作成し、非表示にしておく */
    display: none;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    opacity: 0.5;
}

a:hover::before { /* マウスホバー時に先程作成したbeforeを表示させる */
    display: block;
}

カーソルを乗せたら光るよ！

先ほど作成したボタンと同様、マウスカーソルを乗せるとしっかりと光っていますね。

それでは背景を変えてみましょう。

カーソルを乗せたら光るよ！

先ほど作成したボタンとは異なり、マウスカーソルを乗せた時に背景が透けてしまうことなく、ボタン自体が光っているように見えますね！

もちろんリンクがテキストではなく、画像の場合にも対応可能です。