リンクがかかってる画像にオンマウスすると透明度が変わるCSS - 初心者の簡単WordPressでホームページ作成方法

リンクがかかってる画像にオンマウスすると透明度が変わるCSS

リンクがかかってる画像

  • リンクがかかってる画像は、
    1.スクリプトを書いて「ロールオーバー」させる
    2.矢印を表示してリンクがかかっていることを知らせる
    3.オンマウスで透明度が変わるようにする
    などがありますが、初心者の方には「3.」の「オンマウスで透明度が変わるようにする」方法が一番楽な方法です。
    この例では、透明度が80%になるように設定しています。
    お問合せボタンの例
    リンクがかかってる画像にオンマウスすると透明度が変わるCSS01リンクがかかってる画像にオンマウスすると透明度が変わるCSS02ページ途中の例
    リンクがかかってる画像にオンマウスすると透明度が変わるCSS03やや大きな画像の例
    リンクがかかってる画像にオンマウスすると透明度が変わるCSS04

CSSファイルに簡単なタグを追加するだけ

  • これには、下記の様な「opacity」タグを書き込むだけです。
    一括で、全てのリンクのかかった画像にオンマウスすると透明度が変わって、リンクがかかっていることが分かりますし、そのページへのクリックを誘導できます。
    リンクがかかってる画像にオンマウスすると透明度が変わるCSS05

    このサンプルタグでは、「0.8」「opacity=80」としていますが、ここを「0.7」「opacity=70」とすればさらに透明度高くなります。
    ホームページの内容によって使い分けされたら良いと思います。


「 リンクがかかってる画像にオンマウスすると透明度が変わるCSS」のページ