【コピペで完了】楽天ショップで今すぐ使える!マウスオーバー効果 – 画像透過CSS

1225

こんにちは。歯の治療中にくしゃみがしたくなったら一体どうしたら良いのか26年間答えが出ていないオガリア中村です。花粉の時期は意地でも歯医者に行きません。

今日は、リンク付き画像へマウスオーバーした時に、画像に効果を加えるCSSをご紹介します。今回は「画像を少し明るくする」効果です。(実際は”透過”させてます。なので、背景が暗いとマウスオーバー時も暗くなります。)

CSSを使用している為、JavaScriptが使用できない楽天ショップでもコピペで今すぐ使用できます。 

▼デモ

以下のソースをそのままコピペしてください。

<style type="text/css">
<!-- 
a:hover {
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
-->
</style>

※現在80%の透過設定になっています。数値を変化させる事で、透過を強くしたり弱めたりが可能です。

画像のマウスオーバー変化はつけた方が良い!

なぜなら、クリック率が上がるからです!

ネットショップの場合は特に、テキストよりバナー画像が多い為に「どの画像がクリック可能なのか」の判断が難しくなります。クリックできる画像にはマウスオーバー時に変化を加える事で、お客様にも過ごしやすいネットショップサイトとなります。

マウスオーバー効果をまだつけられていないショップ様は、ぜひ今すぐご対応くださいませ。

 
以上!歯がうずくオガリア中村でした。

 
 

  1. おもしろそうなので早速やってみました!
    レフトナビのどアタマにぶち込んでみましたら右の縦バナーのみ反応しました!

    なんだかよくわかりませがそんな出来栄えでした!
    有難うございました!

      • ogaria
      • 2015 3/12 7:17pm

      yamachan@じゃのめ堂様

      コメント頂きありがとう御座います!
      右の縦バナーだけ・・・!全く原因分かりませんw
      いやしかし良かったです!ありがとうございます。

  1. トラックバックはまだありません。