【CSS】hover時ボタンや画像をopacityで半透明にする方法

aタグなどのリンクではクリックできることをわかりやすく表現することが重要です。

その方法の一つに「マウスを乗せたとき透明にする」があります。

ボタンや画像をhover時opacityで半透明にする方法を解説します。黒く透過させる方法、アニメーションさせる方法も紹介します。

サンプルを用意しているので実際にマウスを乗せて確認してみてください。

ボタンを半透明にする

シンプル版

ボタン

<style>
.example{
    display: block;
    background: #ff7b29;
    padding: 10px;
    text-align: center;
    width: 200px;
    box-sizing: border-box;
    color: #FFF;
    text-decoration: none;
}
.example:hover{
    opacity: 0.7;
}
</style>
<a class="example" href="#">ボタン</a>

「○○:hover{opacity: 数値;}」のように指定します。

「○○:hover」を指定すると、○○の要素にマウスが乗ったときだけCSSを発動させることができます。

「opacity」は要素を透明にするCSSです。0～1までの数値を指定できます。0に近いほど透明になります。

数値は0.7程度がオススメです。

変化にも気づき、文字も読める程度の透明度です。

黒透明版

ボタン

<style>
.example-b{
    background: #000;
    display: block;
    width: 200px;
    text-decoration: none;
}
.example-b span{
    display: block;
    background: #ff7b29;
    padding: 10px;
    text-align: center;
    color: #FFF;
}
.example-b span:hover{
    opacity: 0.7;
}
</style>
<a class="example-b" href="#"><span>ボタン</span></a>

半透明にしたとき白っぽくなるのは背景が白いからです。

黒っぽくするには背景を黒にしましょう。

上記の場合はaタグを黒背景にし、幅を指定します。display: blockがミソです。

その内側spanでボタンのデザインを作ります。spanはaタグと同じ幅、高さです。

このspanが半透明になるとaタグの黒背景がうっすら見えるというわけです。

アニメーション版

ボタン

<style>
.example2{
    /*コレ*/transition: 0.3s;
    display: block;
    background: #ff7b29;
    padding: 10px;
    text-align: center;
    width: 200px;
    box-sizing: border-box;
    color: #FFF;
    text-decoration: none;
}
.example2:hover{
    opacity: 0.7;
}
</style>
<a class="example2" href="#">ボタン</a>

「transition: ○○s」をhoverなしのほうに指定します。

「transition」は数値の変化をアニメーションにするCSSです。

単位の「s」は「秒」を表しており、指定した時間をかけてアニメーションします。

数値は0.2sか0.3s程度がオススメです。

ふわっと変化させつつも「変化した」ことに気付かせやすくできます。

ちなみに「transition」をhoverのほうに指定すると、マウスを乗せたときは急に変化し、マウスを離したときアニメーションで変化します。

画像を半透明にする

シンプル版

<style>
a:hover img{
    opacity: 0.7;
}
</style>
<a href="#">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="" width="300">
</a>

画像をそのままリンクにしたいことあると思います。しかしパッと見リンクだとわかりにくいのでマウスを乗せたとき変化させ、気付きやすくしたいところです。

そんなとき手っ取り早いのが透明度を変えることです。

「a:hover img」と指定するのがオススメです。「aにマウスが乗ったときのimg」を指定することができます。

a要素がimgより大きい場合、imgにマウスが乗ってなくてもクリックできる状態にあることがあります。

クリックできることを示すことが重要ですので「a:hover img」と指定しましょう。

黒透明版

<style>
.example3-b{
    display: inline-block;
    background: #000;
}
.example3-b img{
    display: block;
}
.example3-b:hover img{
    opacity: 0.7;
}
</style>
<a class="example3-b" href="#">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="" width="300">
</a>

画像の背景を黒くする場合、aタグの背景を黒にします。aタグに「display: inline-block」を指定することで幅を画像に合わせることができます。

これだけだと画像の下に黒い空白ができてしまいます。

画像に「display: block」を指定することでこの空白を消すことができます。

アニメーション版

<style>
a img{
    transition: 0.3s;
}
a:hover img{
    opacity: 0.7;
}
</style>
<a href="#">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="" width="300">
</a>

「transition」は数値の変化をアニメーションにするCSSです。hoverなしの状態で指定しましょう。

【まとめ】hover時opacityで半透明にする方法

下記のように指定。

○○:hover{
    opacity: 0.7;
}

アニメーションさせたいときはhoverしていないほうにtransitionを指定。

○○{
    transition: 0.3s;
}

img画像の場合は「aタグにマウスが乗ったときのimg」と指定

a:hover img{
    opacity: 0.7;
}

アニメーションさせたいときはhoverしていないほうにtransitionを指定。

a img{
    transition: 0.3s;
}

以上、CSS hover時opacityで半透明にする方法でした。