:hoverで上下に配置した画像が切り替わるあの表現

スタッフ紹介とか商品画像が並ぶ時によく見る、マウスホバーの時に画像が切り替わるあの表現。
やり方いろいろありますが、個人的に1番簡単なのはabsoluteで画像重ねて不透明度を切り替える方法です。

relative/absoluteで２枚重ねるあの表現

実装サンプルコード

See the Pen
hoverで画像入れ替わり by nagaiyukari (@nagaiyukari)
on CodePen.