メインビジュアルにキャンペーン終了のお知らせをcssで知らせたいということで、白いマスクの上に終了の文字をのせることになりました。

デザイン画像を修正するのがほどんどでしょうが、意外といろんなパターンに使えますのでmemoっておきます。

下記の写真にマスクをかけます。
今回は疑似要素のbeforeとafterを使います。

imgタグは空要素なのでimgタグにbeforeとafter を記述しても何も起こりません。

なのでimgタグの親要素にimg-wrapを作って :beforeと:after にすたいるをつけていきます。

詳細は実際のコードはこちらです。