画像にマウスをのせて白っぽくする!CSSだけで実装する方法

0

 

よく使われるデザインで画像の上にマウスを乗せると白っぽくなるデザインってよくありますよね。
これを実装するにはCSSのコードを編集して実装するわけですが、色々な方法で実装することは可能です。今回、アニメーションなどは実装せずにシンプルに画像を白っぽくするだけの方法を紹介します。

 

CSSだけで画像を白っぽくする

方法と言っても、とても簡単です。下記のコードをCSSファイルに書き加えるだけです。

 

特定の画像だけに適用したい

上記の方法だと全ての画像に反映されます。

例えば、class=”picture”の画像だけに反映したいと仮定します。

そのような場合のコードは

 

上記のような形になります。img.pictureで指定します。
透過の手法は色々な所で活躍してくれるので、ぜひ参考にしてみてください。









 

About Author

Comments are closed.