【CSS】画像やボタンのホバー時に透過させる方法
Kこんにちは！CODE CLUB965のKです！
今回は、ボタンなどにカーソルを合わせたときにホバーさせ、さらに透過させる方法について書こうと思います。
このようにすることでユーザーにボタンをクリックすることができることを伝えることができるのでおすすめです。
透過させる方法
画像などを透過させるには、「opacity」を使います。
「opacity」は、0〜1の間で透明度を指定します。
0に近ければ近いほど透明になります。
なので0.5を指定すると半透明になります。
ホバー時に半透明になるようにするには、以下のように指定してあげればOKです。
img:hover {
opacity: 0.5 ;
}サンプルコードを以下に載せておきます。
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5 ;
}
</style>
</head>
<body>
<img src="画像のURL" width="150" height="150">
</body>
</html>これを表示すると以下のようになります。
画像にカーソルを合わせると、画像が半透明になると思います。
今回はリンクを貼っていないのでページ遷移しませんが、このようにするとクリックできることをより伝えることができます。
最後に
今回はちょっとした工夫でユーザーに優しい表示ができる方法を紹介しました。
少し追加で記述するだけで、見た目は大きく変わるのでユーザーを意識してUIを設計するといいと思います。
それでは、また！
Follow me!
