[css]マウスオーバー時に画像透過をさせロールオーバーを表現するcssテクニック – devolen
cssでロールオーバー(ホバー)時に画像透過をさせ簡単にロールオーバーを表現する方法。 非常に簡単に画像のロールオーバーを表現ができるので紹介します。 ※上の画像は記事内容と全く関係ありませんm(__)m このブログでもロールオーバー(ホバー)時の表現として画像透過をさせているます。 以下のサンプル画像に、ロールオーバーしてもらえれば少し薄くなっているのが分かるかと思います。 その透過処理の方法なんですが非常に簡単です。 ■以下CSSでの画像透過の方法。 ロールオーバー時に画像透過をしたい「img」に以下のCSSを記述してください。 div#hoge a:hover img { opacity:0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; background: #fff; } ■ポイント ■filte
透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた
以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。 今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。 ※追記（09/07/24） 若干修正し、2.1にバージョンアップしました。 （今までのでも問題なく動作します。） ダウンロード プラグインはjQueryと下記プラグインを一緒に使ってください。 opacity-rollover2.1.js 透明度を利用したロールオーバー これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。 ■使い方 $('#over1').opOver(); 適応させたいセレクタを指定し、opOver()で適応させる。 ■サンプルプレビュー これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
