ロールオーバー効果
【備忘録】
一部の画像(個別の画像)に簡単にロールオーバー効果をかける方法。
CSS部分に
※「0.7」「70」の数字は透明度。
好みに応じて変更。
使い方
ロールオーバーしたい画像のタグに
class="hoverImg"
を追加。
一部の画像(個別の画像)に簡単にロールオーバー効果をかける方法。
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"
を追加。
サンプル
通常↓

ロールオーバー↓

通常↓

ロールオーバー↓

<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>
- 関連記事
-
-
ブログパーツ「おきてがみ」 2009/09/11
-
コメント欄の背景(色・画像)を名前によって変える 2009/07/27
-
テンプレート 2007/10/28
-
画像の回りに枠線をつける(テンプレートCSS編) 2009/06/28
-
背景を半透明にする 2009/03/19
-