ロールオーバー効果 - テンプレート

ロールオーバー効果

2011/11/08(Tue) 15:14
テンプレート
0
0

【備忘録】

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

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>

関連記事

0 Comments

Post a comment

NAME

TITLE

WEBSITE

COMMENT

PASSWORD

SECRET

0 Trackbacks

Click to send a trackback(FC2 User)

記事について

おすすめ

・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・トーカ堂
・上海問屋

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=878976369" charset="euc-jp"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=878976369" target="_blank" ><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=878976369" height="60" width="120" border="0"></a></noscript>

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=884045865"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=884045865" target="_blank" ><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=884045865" height="60" width="120" border="0"></a></noscript>

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=884323587"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=884323587" target="_blank" rel="nofollow"><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=884323587" height="60" width="120" border="0"></a></noscript>

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=878880758" charset="euc-jp"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=878880758" target="_blank" ><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=878880758" height="60" width="120" border="0"></a></noscript>

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=879760674" charset="euc-jp"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=879760674" target="_blank" ><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=879760674" height="60" width="120" border="0"></a></noscript>

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=882433718"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=882433718" target="_blank" ><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=882433718" height="60" width="120" border="0"></a></noscript>

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=880493937" charset="euc-jp"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=880493937" target="_blank" ><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=880493937" height="45" width="135" border="0"></a></noscript>

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=878881687" charset="euc-jp"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=878881687" target="_blank" ><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=878881687" height="45" width="135" border="0"></a></noscript>

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=878883627" charset="euc-jp"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=878883627" target="_blank" ><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=878883627" height="45" width="135" border="0"></a></noscript>

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=877901136" charset="euc-jp"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=877901136" target="_blank" ><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=877901136" height="45" width="135" border="0"></a></noscript>

<script language="javascript" src="//ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2532263&pid=878775574" charset="euc-jp"></script><noscript><a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=2532263&pid=878775574" target="_blank" ><img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2532263&pid=878775574" height="45" width="135" border="0"></a></noscript>