*

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

おすすめトピックス

関連記事

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

https通信下でjavascriptが動かない場合の対処法

https 通信下で javascript が動かない!とお困りという事は、もしかしてあなたのページは特定のページだけ https 通信を行っているのではないでしょうか?例えばログインページ、決済ページのみ暗号化を行う […]

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

画像付きリスト
関連記事などに画像付きリストをCSSで簡単に作るサンプル

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。 ポイ […]

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

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

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

上部広告

著者について

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

フォローはこちら

       

上部広告

       
Amazonプライム限定のクレヨンしんちゃん外伝は地上波とは違う面白さがある

クレヨンしんちゃん25周年を記念して2016年8月から Ama

Chromeでテーブルの列をコピー、矩形選択ができる拡張機能「Copytables」

ウェブサイト上でもデータをまとめる際に表がよく使われます。これ

キャッシュトレイ
三菱東京UFJ銀行でもコンビニATM手数料を無料にする事が可能です(条件有り)

セブンイレブンやローソンなどに設置してあるコンビニ ATM は

サングラス
車を運転中に朝陽が眩しくて信号が見えないのでサングラスで対策した

先日車を運転中にヒヤリとする出来事がありました。それは信号に気が付かな

ニーアオートマタのPC版をGeforce GTX960でプレイした感想

2017年3月18日より発売されたスクエアエニックス(開発はプ

→もっと見る