画像をマウスオーバーすると半透明の白いフィルターをかけたように見せる方法【CSS】

画像にリンクなどを付けているときは、マウスオーバー時に画像を拡大させたりフィルターをかけたり、何かしら変化をつけたいと思います。

半透明の白いフィルターをかけたいというときには、マウスオーバー時に半透明の白い要素を重ねて表示するという方法もありますが、画像を透過させることで、半透明の白いフィルターがかかったように見せることができます。

filterで画像を透過させる

画像の背景が白の場合は、マウスオーバーのときに画像を透過させるのが一番簡単な方法です。

実際は画像が半透明になっただけですが、半透明の白いフィルターがかかったように見えます。

See the Pen
whitefilter by KUBO (@KUBOGEN)
on CodePen.

背景が白じゃない場合

背景が白い場合は単に画像を透過させればよかったですが、背景が白以外の場合は、画像を透過すると白ではない背景色が映ってしまうので、半透明の白いフィルターがかかったようには見えません。

See the Pen
whitefilter2 by KUBO (@KUBOGEN)
on CodePen.

そのような場合は、画像と同じ大きさのdivなどの要素に白い背景を指定しておきます。

See the Pen
whitefilter by KUBO (@KUBOGEN)
on CodePen.

通常時は、divが画像に隠れていて見た目は変わりませんが、マウスオーバーして画像が透過した際には、白い背景が映ります。

画像のマウスオーバー時に半透明の白いフィルターがかかったように見せるのには、この方法が一番手っ取り早くて簡単かなと思います。