*

CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

公開日: : ノウハウ

マウス

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で html ソースもごちゃごちゃして読みにくくなってしまいました。

しかし、CSS もどんどん進化して今では画像のロールオーバーも CSS のみで行えるようになりました。html ソースも汚くならないですし、軽いので今ではほとんどがこちらの方法で行います。

その一つの方法が CSS3 の opacity というプロパティです。opacity は要素の透明度を0.0~1.0の間で指定します。

img:hover{
   opacity:0.8;
}

上のように CSS を記述すれば、画像の上にマウスが乗った時に画像の透明度が上がって白っぽくなり、あたかも画像が切り替わったように見えるという寸法です。IE9 以上に対応しています。

しかしこの方法は背景が白かった場合にのみ有効です。背景が黒かった場合、画像の透明度が下がると黒っぽくなってしまいます。背景が黒い場合、画像の透明度を下げるより明るさを上げてもらいたいものです。

filterプロパティのbrightness関数を使う

このような時には filter プロパティの brightness 関数を使うと背景が黒くてもロールオーバーで白くなります。こちらは明度を変えるプロパティです。0が最も暗く、数値が大きくなるほど明るくなります。1.0が元々の画像です。

img:hover{
     -webkit-filter: brightness(1.2);
     -moz-filter: brightness(1.2);
     -o-filter: brightness(1.2);
     -ms-filter: brightness(1.2);
     filter: brightness(1.2);
}

しかし、これは Chrome や Safari、Opera、Edge には対応していますが、IE には対応していません。IE に対応する為にはやはり、opacity か別の方法を考える必要があります。

上部広告

  • Pocket

おすすめトピックス

関連記事

iframe内のjavascriptを無効にする方法

html の iframe(インラインフレーム)とは、一つのページ内に小窓を作ってその内部に別ページや別サイトを表示させるタグです。iframe 内のページは自分で作る事もありますが、他の人が作る事もあります。どういう事 […]

動く炭酸
飲み物の写真がリアルに動き出す!フリーソフトSizzTassの使い方

知り合いに聞いたのですが、「料理の写真からぐつぐつと煮えたぎる写真を作れるソフトがあるらしいよ。テレビでやってた。」と。最初は何だそれは?と思って意味がよく理解できませんでした。 ソフト名を聞いて調べてみたのですが、確か […]

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
つるやパンの2号店!ふわふわまるい食パン専門店が長浜駅前にオープン

つるやパンと言えば聞いたことがある方も多いかもしれません。つる

コンビニ受け取り
不在がちでもAmazonの注文の品をコンビニで受け取る事ができます【ファミリーマート編】

ネットショッピングは今では物を購入する手段としてメジャーな存在となりま

安全靴
カジュアルで疲れにくく痛くない!安くて履きやすいおすすめ安全靴【喜多】

倉庫や工場、建設業の方ならお馴染みの物かと思いますが、安全靴と

CapsLockキー
CapsLockキーにイライラ、いらないので無効化してさしあげた

キーボードの CapsLock キーって知ってますか?あなたの

AMP
WordPressを簡単にAMPに対応するテーマやテンプレートを紹介

ウェブサイトの SSL 対応と同様に、いずれ AMP にも対応

→もっと見る