マウスオーバーで画像に影を付けたい

リンク付きの画像をマウスオーバーすると画像が浮き上がって見える

影の色を濃くすることで、浮き上がりの深さを調節できます

<style type="text/css">

a img:hover{
    box-shadow:3px 3px 6px rgba(0,0,0,0.5);
}

</style>


影を濃く、小さくすると、それだけ画像は小さく浮き上がってみえます

<style type="text/css">

a img:hover{
    box-shadow:2px 2px 3px rgba(0,0,0,0.8);
}

</style>



▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


コメントをお書きください

コメント: 1
  • #1

    初心者山梨 (日曜日, 02 4月 2017 14:00)

    初心者JIMDOフリー利用中です。JIMDOで使用できるオンマウスでポップアップメッセージを表示できるサンプルソースを探しています。下記サイトのようなイメージです。
    ●ツールチップ・サンプルコード
    http://www.webcreatorbox.com/tech/js-to-css/#js-to-css7
    コピペで使用できるフリーで簡単なもので構いません。アドバイスいただけると幸いです。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422