CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのマウスオーバーで画像の不透明度を変更する方法

Webページに動きを加えるテクニックとして、マウスオーバー（ホバー）時に画像の不透明度を変化させる方法は非常に人気があります。実装には、CSSの opacity プロパティと :hover セレクターを組み合わせるだけでOKです。追加のJavaScriptは不要で、HTMLとCSSだけで簡単に実現できます。

さらに transition プロパティを併用すれば、不透明度が急に変わるのではなく、なめらかにフェードする演出が可能になります。以下に具体的なコード例を示します。

コード例

<!DOCTYPE html>
<html>
<head>
<style>
body{
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.transparent{
   width:270px;
   height:200px;
   opacity: 1;
   transition: 0.3s;
}
.transparent:hover{
   opacity: 0.3;
}
</style>
</head>
<body>
<h1>マウスオーバーで画像の不透明度を変更する例</h1>
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg">
<h2>上の画像にカーソルを合わせると不透明度が変化します</h2>
</body>
</html>

コードの解説

  • opacity: 1; … 通常時は画像を完全に表示します（1 = 不透明）。
  • .transparent:hover … 画像にマウスカーソルが乗ったときに、opacity を 0.3 に変更し、画像を半透明にします。
  • transition: 0.3s; … 不透明度の変化を0.3秒かけて滑らかにアニメーションさせます。

実行結果

上記のコードを実行すると、次のような出力になります。

CSSのマウスオーバーで画像の不透明度を変更する方法

画像にマウスを合わせると、0.3秒かけて透明度が下がり、半透明の状態へとスムーズに切り替わります。このテクニックは、ギャラリーや商品一覧など、ユーザーの注目を引きたい場面で効果的に活用できます。

  1. Macの壁紙（背景）を変更する方法｜カスタム画像や自動切り替え設定も解説

    壁紙は、あなたの個性やセンスを映し出す大切な要素です。愛するペットのかわいい写真、結婚式の思い出の一枚、思わず笑顔になるお気に入りのアートワーク——自分好みの画像がデスクトップに表示されているだけで、毎日の作業がぐっと楽しくなります。 画像出典：YouTube 工場出荷時のままのデフォルト背景を使い続けるのは、正直少し退屈ですよね。幸いなことに、macOSには壁紙を変更するための多彩な機能が用意されています。Macには豊富な標準壁紙がプリインストールされており、その中から選ぶこともできますし、好きなカスタム画像を設定することも可能です。さあ、あなたのMacをお気に入りのスタイルに着替えさせま

  2. Windows 10 でマウスの感度を変更する方法｜設定アプリとレジストリの2つの手順

    大事なプレゼン資料を探している最中、上司がすぐそばに立っているその瞬間に、マウスの動きが急におかしくなったら……どうしますか？ 実は、こうしたトラブルはWindows 10のマウス感度（ポインター速度）の設定に問題がある場合によく起こります。 Windows 10 でマウスの感度を変更する方法 ご安心ください。この記事では、Windows 10でマウスの感度を調整できる2つの方法を、手順に沿ってわかりやすく解説します。それでは始めましょう！ 方法1：設定アプリから変更する 「Win」キーと「I」キーを同時に押して設定アプリを開き、「デバイス」をクリックします。 左側のメニューから「マ