マスクとキャプションの表示タイミングをずらす

05e4597f97c9f455e567e9422c3d5a21_s

マスクとキャプションの表示タイミングをずらして表示

画像にマウスオーバーするとまず画像全体に被るようにマスクが表示され、その後少し遅れてキャプションが左から流れて入ってくるものです。実装にはCSSを下記のように記述します。

画像タイトル

画像説明キャプションテキスト
画像説明キャプションテキスト
画像説明キャプションテキスト
画像説明キャプションテキスト

CSS