ホーム(記事一覧)へ

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>
.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のほうに指定すると、マウスを乗せたときは急に変化し、マウスを離したときアニメーションで変化します。

img(画像)版

<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」と指定しましょう。

img(画像)をアニメーションで

<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で半透明にする方法でした。

関連記事