*

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

おすすめトピックス

関連記事

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

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

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

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

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

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

videoタグのmp4動画にもサムネイル画像を表示させるには

ニコニコ動画や Youtube を始め、インターネット上で動画を見たり配信する機会が珍しくない時代となりました。むしろ毎日アップロードされる動画が多すぎて見てもらう為の競争となっていると言っても過言ではありません。 そこ […]

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

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

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

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

著者について

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

フォローはこちら

       

       
郵便局の郵便配達が2020年を目処に土曜配達を廃止する見込み、代替方法は?

郵便配達の土曜日配達が2020年を目処に廃止される方向へ動いて

Androidスマホやタブレットの予測変換を1つだけ削除、消す方法

Android スマートフォンやタブレットで文字入力をしている

住所録がない場合でもダイレクトメールが送れる郵便局のサービス「かもめタウン」

ネットショップの仕事をしていた頃はダイレクトメールを送る為の住

彦根市の本格スパイスカレー専門店「カレー食堂ジャンゴ」でランチ

彦根市に本格スパイスカレー専門店「カレー食堂ジャンゴ」が201

Twitter公式Web版で複数アカウントの切り替えに対応!既存アカウントの追加方法

Twitter をいつもお使いであれば、複数アカウントを運用し

→もっと見る