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

test_img

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


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

コード全体

html

css


これでオッケー!


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


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

関連記事

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

ピックアップ記事

  1. socialmedia
  2. iphone6s_pink
  3. http2
  4. ゴム製の湯たんぽ
  5. Google先生
「悪い子は退学にすんよ。」
  6. サムネイルテンプレ
  7. スクリーンショット 2016-03-01 22.46.36

    2016/3/2

    最強の営業
  8. print-ad-konicare-minyak-kayu-putih-versi-2-edit_20100511160433

ピックアップ記事

  1. img108

    2016-10-4

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

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

ピックアップ記事

  1. %e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-21-46-38

    2016-11-1

    最近バズってるなと感じるダンス3選!!!

    出典:http://www.tbs.co.jp/NIGEHAJI_tbs/  「ULTRA TIGE…

ピックアップ記事

  1. 019e4ce2a2a8089f68904bdf49ee6833_m

    2016-11-16

    れんこんサミットって何!?11月17日はレンコン記念日!今夜はレンコン料理で決まり!!

    みなさん、今日が何の日かご存知ですか!?そう、今日は!!レンコンの日!!!!です!!!!レンコンの日…
ページ上部へ戻る
Top