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

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

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

コード全体

html

css

これでオッケー!

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

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

関連記事

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

ピックアップ記事

ピックアップ記事

  1. 2013-11-8

    ダリが採点した画家たちランキング【前編】

    サルヴァドール・ダリという画家をご存知でしょうか?恐らく絵を見れば「あ〜なんか見たことある」と 誰し…

ピックアップ記事

  1. 2018-7-2

    【Report1】IMフォーラム★ゴールドスポンサーとして協賛&登壇

    IMフォーラム★ゴールドスポンサーとして協賛&登壇広報宣伝部のエバンジェリスト 黒田美穂 こと “く…

ピックアップ記事

  1. 2016-11-14

    中目黒おすすめバー特集 Part.1

    中目黒にはオシャレなお店がたくさん。 服や雑貨、レストランだけでなく、 オシャレなバーもたくさんある…
ページ上部へ戻る
Top