--年--月--日 --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ロールオーバー

2010年10月19日 10:28

saajhjhjhjl.jpg


ブログタイトルを画像に変更しました。
カーソルをのせると画像が半透明になります。
リンクしているのが分かりやすいし、動きがあっていいですよね。


ここで用意した画像はタイトル画像の一枚だけ、
ちょっとしたCSSの追加だけで画像を余計に作らずにロールオーバーを装うテクニックを発見して使ってみました。
簡単でとても使えるテクニックだったのでご紹介します。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

その方法とは、CSSに下記ソースを追加するだけ。


a:hover img{
opacity:0.8;
filter:alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}


0.8や80というのは、不透明度80%、という意味になるので、
もっと薄くしたい場合は、0.6 、60 等に変更する事でカスタマイズ可能です。

このソース、全画像リンクがロールオーバーで薄くなる、
という結構な荒技なので、
もし一部の画像にだけ適用したいのであれば、
a:hover img
の部分を
a:hover img.hoverImg
に変更し、適用させたいimgタグに、
class="hoverImg"
を追加することで使い分けが可能です。

参考URL:超シンプル!hover画像作る必要ナシ、CSSだけで、画像をロールオーバー!

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

hirorisu2.gif柊印のブログでは画像に差し替えたブログタイトルh1のタグに反映させました。

でもこんな技があるなんてすごい!勉強になりました。
スポンサーサイト


最近の記事


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。