画像の表現色々（拡大・縮小・ぼかす・透過・モノクロ・セピア・波紋・光る・透過グラデーションにテキストなどなど。。。）

画像が拡大 CODE

CSSのscaleを使い、hoverをしたら画像を拡大させる
拡大した時にはみ出す画像を隠すためのマスクをつくり、CSSのoverflow:hidden;を使って隠します

See the Pen 画像を拡大 by ちいうさ (@zqnixpal-the-looper) on CodePen.

画像を縮小 CODE

CSSのscaleを使い、hoverをしたら画像を縮小させる
縮小前の拡大画像のはみ出しを隠すためのマスクをつくりCSSのoverflow:hidden;を使って隠します

See the Pen 画像を縮小 by ちいうさ (@zqnixpal-the-looper) on CodePen.

画像をぼかす CODE

CSSのblurを使い、hoverをしたら画像をぼかす
ぼかした時にはみ出す画像を隠すマスクをつくり、CSSのoverflow:hidden;で隠します

See the Pen 画像をぼかす by ちいうさ (@zqnixpal-the-looper) on CodePen.

画像を透過 CODE

CSSのopacityを使い、hoverをしたら画像を透過させる

See the Pen 画像を透過 by ちいうさ (@zqnixpal-the-looper) on CodePen.

モノクロからカラー CODE

CSSのgrayscaleを使い、hoverをしたら画像をモノクロからカラーに変更する

See the Pen モノクロからカラー by ちいうさ (@zqnixpal-the-looper) on CodePen.

セピアからカラー CODE

CSSのsepiaを使い、hoverをしたら画像をセピアからカラーに変更する

See the Pen セピアからカラー by ちいうさ (@zqnixpal-the-looper) on CodePen.

画像から波紋 CODE

波紋の要素のはみ出している部分を隠すためのマスクをつくり、CSSのoverflow:hidden;を使って隠します
マスクの疑似要素beforeに円の背景色つくり、円が中心から水の波紋のように拡大するアニメーションをつくる

See the Pen 画像から波紋 by ちいうさ (@zqnixpal-the-looper) on CodePen.

画像が光る CODE

光の要素のはみ出している部分を隠すためのマスクをつくり、CSSのoverflow:hidden;を使って隠します
マスクの疑似要素beforeに斜めの細長い縦長の背景色つくり、光の基点となる場所より
さらに左の見えていない場所から右端へアニメーションをつかって流します

See the Pen 画像が光る by ちいうさ (@zqnixpal-the-looper) on CodePen.

画像を透過グラデーションにテキストが浮かぶ CODE

マスクの疑似要素beforeに縦横幅100%の背景色（グラデーション）を指定しhoverしたら0.3秒かけて出現。
CSSのopacityを使い、hoverをしたら画像を0.3秒かけて透過させる。
画像の天地中央位置にいるテキストがhoverをしたら0.5秒かけて透過0→出現。

See the Pen グラデーションになってテキスト現れる by ちいうさ (@zqnixpal-the-looper) on CodePen.