ロールオーバー効果

【備忘録】

一部の画像(個別の画像)に簡単にロールオーバー効果をかける方法。

CSS部分に

a img.hoverImg{
background:none!important;
}
a:hover img.hoverImg{
opacity:0.7;
filter:alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
background:none!important;
}
を挿入。
※「0.7」「70」の数字は透明度。
好みに応じて変更。


使い方
ロールオーバーしたい画像のタグに
class="hoverImg"
を追加。

サンプル

通常↓
201110210120.jpg

ロールオーバー↓
201110210120.jpg

<a href="https://blog-imgs-48.fc2.com/s/a/k/sakuraxren/201110210120.jpg" target="_blank"><img src="https://blog-imgs-48.fc2.com/s/a/k/sakuraxren/201110210120s.jpg" alt="201110210120.jpg" border="0" width="224" height="149" class="hoverImg"/></a>




関連記事

0 Comments

Post a comment