*

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で変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

リストの表示数を制限する
HTMLでulタグのリスト項目の表示数を制限する

HTML で ul タグを使えば以下のようなリストを作れます。 リスト リスト リスト このようなやつですね。順序なしリストと呼ばれて、何かを箇条書する時に便利です。html タグでは以下のように記述します。 この箇条書 […]

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

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

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CS […]

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】

現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディング画面を見る機会も多かったです。このようなローデ […]

著者について

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

フォローはこちら

       

       
Illustratorでテキストをアウトライン化できない時に確認すること

Illustrator を使って印刷物などを作っている人ならテ

Gmailのエラー「Gmail requires one or more Google Play services that are not currently avaiable.」で開けない

あるいつもどおりの朝、スマートフォンで Gmail を開こうと

Amazonで自分の書いたレビューを一覧で確認する方法

世界的に最大級の通販サイト Amazon。私もよく使います。利

大垣カフェ「カフェ飯屋ピーナッツ」暖かく自然派なお食事が美味しいアットホームな場所でした

岐阜県大垣市の市民病院近くにオープンした「カフェ飯屋ピーナッツ

Illustratorで矢印に綺麗に境界線を付ける方法

Photoshop では矢印でも文字でも綺麗に境界線をつけるレ

→もっと見る