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

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


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

コード全体

html

css


これでオッケー!


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


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

関連記事

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

ピックアップ記事

  1. 2016-12-7

    【冬ドラマ】2017年1月期ドラマ、最速情報!!!!

    出典:https://matome.naver.jp/odai/214174024591956100…

ピックアップ記事

  1. 2016-8-17

    【2016年度版】納豆に混ぜたら美味しいものランキングベスト3

    私は3度の飯より納豆が好きです! まぁ嘘なんですけど。でもそれなりに好きです。 でも市販の納豆っ…

ピックアップ記事

  1. 2016-8-3

    納豆が似合う!?芸能人ランキングベスト3

    先日、納豆3パック1セット売りの納豆を僅か4分で完食しました。 ところで、皆さんはもちろん納豆を食…
ページ上部へ戻る
Top