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

CSSで画像ホバー時に青い影を表示する方法

Webページ上の画像にマウスカーソルを合わせた（ホバーした）ときに、青い影を表示したい場合は、CSSの box-shadow プロパティと :hover 疑似クラスを組み合わせて使用します。

:hover セレクターは、ユーザーが要素にマウスを重ねた瞬間にスタイルを適用するためのもので、box-shadow を指定することで、ホバー時に影が浮かび上がるような視覚効果を実現できます。

実装のポイント

  • img 要素への基本スタイル：枠線（border）、角丸（border-radius）、内側の余白（padding）などを設定し、画像の見た目を整えます。
  • img:hover への影の指定：box-shadow の値は「水平オフセット 垂直オフセット ぼかしの距離 広がりの距離 色」の順で指定します。

コード例

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            border: 2px solid orange;
            border-radius: 3px;
            padding: 7px;
         }
         img:hover {
            box-shadow: 0 0 2px 2px blue;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" alt="Online Compiler" width="300" height="300">
   </body>
</html>

box-shadow の値の解説

上記の例では box-shadow: 0 0 2px 2px blue; と指定しています。それぞれの値の意味は以下の通りです。

  • 0：水平方向のオフセット（影を左右にずらさない）
  • 0：垂直方向のオフセット（影を上下にずらさない）
  • 2px：ぼかしの距離（影の輪郭がどれだけぼやけるか）
  • 2px：広がりの距離（影のサイズを拡大する量）
  • blue：影の色（ここでは青色を指定）

このコードをブラウザで開き、画像にマウスカーソルを重ねると、画像の周囲に青い影が表示されます。影の大きさや色を変えたい場合は、box-shadow の各値を調整してください。例えば、0 0 10px 5px rgba(0, 0, 255, 0.6); のように指定すると、より柔らかく半透明な影になります。

  1. CSSで画像オーバーレイのホバースライド効果を作成する方法

    CSSだけでも、JavaScriptに頼ることなく、画像にマウスカーソルを重ねた際にオーバーレイがスライドして表示される洗練されたホバーエフェクトを実装できます。本記事では、その具体的な作り方をサンプルコードとともにわかりやすく解説します。実装例以下は、CSSで画像オーバーレイのホバースライド効果を作成するコード例です。<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"&

  2. CSSでホバー時に要素を表示する方法【サンプルコード付き】

    CSSでマウスホバー時に非表示の要素を表示するには、:hover 疑似クラスと隣接兄弟セレクタ（+）を組み合わせるのが一般的です。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <style>    body{       margin:20px;       padding:20px;       font-family: 'Segoe UI', Tahoma,