へっぽこデザイン備忘録〜CSSだけでオンマウスした時に画像と文字の色を同時に変える方法〜

CSSだけでオンマウスした時に画像と文字の色を同時に変える方法


よく見かけるやつです。
簡単で割りと使うんですが、1発で成功しなくて、あれ、なんでだっけ・・・?とよく時間を取られます。
なので、今回は忘れないようにコードを貼り付けておきます!!
サンプル

コード全体

html

css


これでオッケー!


画像は正確には色を変更しているのではなく、画像の透明度を変えています。
今回はサンプルの下地が暗い色のため、オンマウスすると下地が透けて画像が暗く見えます。
明るくしたい場合は、白など明るい色の下地にしてください。


キングスマン続編楽しみだ〜。

関連記事

コメントは利用できません。

ピックアップ記事

  1. 2016-10-4

    おもしろ可愛い♥ハロウィン限定メニュー2016!EGGS ’N THINGS、Q-pot CAFE、とらやカフェなどなど・・・

    ハロウィン限定メニュー&スイーツ特集もうすぐハロウィン!ということで、今回は都内のカフェを中心にハロ…

ピックアップ記事

  1. 2016-9-7

    フリースタイルダンジョンはなぜ流行ったのか??初心者でもわかるラップの楽しみ方!!!!

    引用:http://www.tv-asahi.co.jp/freestyledungeon/ なぜ今…

ピックアップ記事

  1. 2016-5-12

    噂のダンシングクラブに行ってみました!

    みなさま、こんにちは!ちっひーです!!月金をお休みをすれば、10日もお休みになるという長…
ページ上部へ戻る
Top