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

上記の広告は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. トラムmom. | URL | L1ch7n1I

    なんとなくわかった。
    けど、CSSはやっぱりチンプンカンプンじゃわ~(笑)
    とにかくそのタグ入れたら薄くなるのね^^
    なるほどなるほど。

  2. おね | URL | -

    このタグ入れたら、リンクされている画像が薄くなるよ。
    バナーとかに画像に使ってたらいいかもね。

    自分では逆立ちしてもこんなタグ思いつかない。。。。

    CSSは使いこなせたらすごく楽しい!けど、奥が深すぎて難しいわ。

  3. katsuke made の tsu | URL | -

    まねしたいです

    こんにちは(^^)

    リンク昨日気づきました!!ありがとうございます
    うれしいですわあ

    マルクトでまたまた よろしくお願いします
    相棒が 喜びますわあ

    楽しみにしています(^^)/

  4. おね | URL | -

    Re: まねしたいです

    マルクト、ご注文のブタ持って行きます。
    楽しみじゃね。またお嬢が入り浸るかもよ、気を付けて!

コメントの投稿

(コメント編集・削除に必要)

トラックバック

この記事のトラックバックURL
http://hiiragiclaft.blog85.fc2.com/tb.php/32-78ec44cf
この記事へのトラックバック


最近の記事


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