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

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

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

コード全体

html

css

これでオッケー!

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

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

関連記事

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

ピックアップ記事

  1. 2013/9/10

    夏風邪
  2. 2015/8/21

    不思議な体験

ピックアップ記事

  1. 2016-10-25

    へっぽこデザイン備忘録〜CSSだけで簡単にランキング順位を表示させる方法〜

    夏にコートを捨ててしまったので、早く買いに行かないと死ぬかもしれません。 去年は掛け布団を捨てて凍…

ピックアップ記事

  1. 2016-8-30

    へっぽこデザイン備忘録 〜簡単にWordPressのサムネイルサイズを増やす方法!〜

    シン・ゴジラ3回目見てきました。4回目行ってきます。 今回はWordpressで使うサムネイル…

ピックアップ記事

  1. 2016-5-11

    自分が思いついたサービスは他の誰かも考えている

    こんばんにちは。日時過ごしていると、こんなサービスあればいいのに。なんてことをよく考えることがある。…
ページ上部へ戻る
Top