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

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

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

▼デモ

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

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

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

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

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

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

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

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

関連記事

【コピペで完了】楽天GOLDで作るスマフォページに「検索窓」を設置する方法 楽天商品ページの「買い物かごに入れる」ボタンを大きくする方法 楽天商品ページ、商品名とキャッチコピーにCSSを適用する方法 楽天ショップの縦帯バナーを、「リアルタイムde切替くん」を使って自動切替する方法