web-dev-qa-db-ja.com

ホバー時に画像を点灯

http://www.kickstarter.com をご覧ください。

ロゴの上にカーソルを合わせると、画像が点灯します。ホバーで別の画像を使用せずにこの効果を実行できますか？

私の最初のアイデアは::after:hoverとロゴを覆う透明度の高い白い四角を追加しますしかし、私のロゴは青い背景に配置されるため、これは機能しません。別のアイデア不透明度を0.9に設定し、ホバー時に1に設定します。ただし、これにより、デフォルトで画像が暗く見えます。

htmlcssopacity
7
lawls

青い背景のため、現時点では純粋なCSSで必要なことを実行できません。あなたの最善の策は、photoshopで画像を編集して:hover明るさ、そして次のようなものを使用します：

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

ホバー時の不透明度の変更は機能します：

img:hover {
   opacity: 0.5;
}

フィドル

19
Andy

次のように、CSS画像フィルターを使用できる場合があります。

img:hover {-webkit-filter: brightness(150%); }


これは時々おかしく見え、Webkitブラウザーでのみ機能しますが、私が考えることができる最良のソリューションです。青色の背景も維持できます。

これは、青色の背景にKickstarterロゴを表示するjsfiddleです。

http://jsfiddle.net/62bCB/



乾杯、

22
jerboa88

元のCSSには次のものが含まれています。

img:hover {
    filter: alpha(opacity=80);
    opacity: .8;
}

フィドル： http://jsfiddle.net/praveenscience/hfUpk/

1
Praveen Kumar Purushothaman

このCSSコードを使用すると、瞬時に明るくなるよりもスムーズな移行を実現できます。 Techpp.comとTechlivewire.comも、トップページの特集セクションで、これと同じCSSまたはそれに類似したCSSを使用しています。 stackoverflowがエラーを出し続けたので、CSSをここに投稿できなかったので、ペーストリーに入れました。 http://paste2.org/1L9H2XsF

0
user3268442

不透明度の値は0.1から1の間で非常に明るく、1つの値は暗い（デフォルト）

img {
    filter: alpha(opacity=100);
    opacity: 1;
}
img:hover {
    filter: alpha(opacity=70);
    opacity: 0.7;
}
0
Shahnawaz

サポートする必要のあるブラウザーに応じて、いくつかの選択肢があります。ロゴを背景画像にして、ホバー時に画像を変更できます。 （または画像をスプライトして、ちらつきが発生しないようにします）

または、古いバージョンのIEでCSS不透明度とMicrosoftフィルターの組み合わせを試すこともできます。 http://www.w3schools.com/cssref/css3_pr_opacity.asp

背景が暗いとおっしゃっていたので、いくつかの新しいCSSフィルター（彩度、明るさなど）を試すことができますが、IEには運がありません。 http://www.html5rocks.com/en/tutorials/filters/understanding-css/

0
smurfarita