Web制作でマウスホバーに関するアニメーションを作ることは多いです。
その代表的な例として「マウスを乗せると画像やボタンが透ける」というものがあり、こちらCSSのみで作成できるので覚えておくと便利です。
また動画もあるので必要に応じて使ってください。
CSSのopacityで要素を透過させる方法
まずはHTMLを以下のように想定します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container"></div>
</body>
</html>続いてCSSは以下のように作ります。
.container {
width: 100px;
height: 100px;
background-color: red;
}
ブラウザをリロードすると赤いブロックが表示されているのが分かります。
こちらの赤いブロックが透けるような内容を作っていきます。
CSSで以下のようにコードを追加します。
.container {
width: 100px;
height: 100px;
background-color: red;
/* ここを追記 */
opacity: 0.5;
}
赤いブロックが透けて表示されていますね。
CSSにはopacityというプロパティが用意されていて、値に数字を指定することで要素を透けさせることができます。
指定できる数字は０～１の範囲と決まっていて、０が完全に消えた状態で１に近づくにつれて少しずつ色が濃くなっていく感じです。
数字はデザインの色によって適切なものが変わってきますので、ご自身で色んな数字を入れて試してもらうのが良いでしょう。
マウスを乗せたときに要素を透けさせる方法
要素を透けさせる方法は何となく分かってもらえたかと思います。
続いてマウスに乗せた時にだけ対応するようにCSSを修正してみます。
.container {
width: 100px;
height: 100px;
background-color: red;
}
/* ここを追記 */
.container:hover {
opacity: 0.5;
}CSSでは「セレクタ名 : hover」とすることで「マウスを乗せたときのスタイル」を書くことができます。
先ほどのopacity : 0.5を「.container」から「.container : hover」に移動させました。
こちらでブラウザをリロードすると元の透けていない赤いブロックが表示されます。
この状態からマウスを乗せると赤いブロックが透けて見えるようになります。
今回の透けさせるアニメーションに限らず、「マウスを乗せた時のアニメーション」は色んな種類があるので「セレクタ名 : hover」という書き方はぜひ覚えておきましょう。
最後にアニメーションっぽく見せるようにCSSを更に1行追加します。
.container {
width: 100px;
height: 100px;
background-color: red;
/* ここを追記 */
transition: all 0.5s;
}
.container:hover {
opacity: 0.5;
}ブラウザをリロードして再度同じようにマウスを乗せてみます。
赤いブロックが透けているのは同じなのですが、少しばかりフワッとした動きに変わりました。
こちらtransitionというプロパティを追加していて、簡単に言うと「ゆっくり変化させる」という効果があります。
transitionについては別の記事でも解説しているので初めての方は確認してみてください。