それらは6つの要素からなる。そして配置され重なり合わなければならない。

要件：
　A：5つの画像と1つの文章からなる要素を配置する。画像についてはカーソルが乗った際にリンクボタンが出てくるようにする。その際、画像全体を透過した黒で覆うこと。
　B：5つの画像はすごくゆっくり別の画像とフェードインで入替えを行う。画像が入れ替わるタイミングは、5つの画像それぞれでバラバラにすること。
　
　PC画面いっぱいに配置された5つの画像を『「slick」でフェードイン/アウトする感じで』と言われて、この職について半年に満たない私でさえ「それはできるけどアリなの？むしろOKなの！？重くないの？！」と、電話口で指示くれたデザイナーさんに聞きたくなりました。
先輩A氏に「これはありですかね？」「いやーこれは……」はい、よかった！聞いてよかった！
　
　そういうやり取りの末、cssアニメーションで2種の画像を切り替える方向で。htmlに直書きした画像を絶対配置で重ねて、アニメーションで時間経過に応じて上の画像の「opacity」の値を変化させて、フェードイン/アウトを表現しました。あとは5つの画像の透過の始まるタイミングを「animation-delay」でズらします。
これと別に、予め作成しておいたリンクボタンを含む要素の背景色を透過した黒に設定。絶対配置で画像の上に重ねて配置して「visibility」「opacity」で表面上消えてもらい、「hover」でカーソル乗った際に出てきてもらうようにします（今考えると「visibility」不要ですよね…）。
　
　なおフェードイン/アウトで表示される画像、1種類しか用意してもらえなかったので、同じサイト内の他の画像からそれっぽいのをチョイスしてはめ込みました。この辺の拘りは人それぞれかもですが、全体的な統一感を考えるとデザイナーの人にやってほしい箇所です。もしくは指示出しの際にその旨も伝えてください。後出しと指示抜けは心が一番ささくれ立ちます。
　
　最後に各画像と文章で構成された1個の計6つの要素のレイアウト。単純に「flexbox」と「flex-warp」を活用し、各要素の横幅の比率で並べていきます。一部画像は重なる様になっていたので、これは「margin-top」をマイナス値に設定して重ねることでいけるだろうと。
　
　問題発生。
重なる画像、部分的に下の画像が見える仕様でした。画像の右上と左下が四角で切り取られ、上に位置する画像と下に位置する画像が切り取った部分から見えてる感じ。
何かcssで該当部分を切り抜けないかと思案した挙句、該当部分を切り取ったPNG画像と差替えました。あとはこのままだと「hover」の際に透過した黒が、切り取った部分から見える他の画像に影響するため、該当部分を切り取った「透過した黒い画像」を用意、これを表示することで対応しました。
　
　もはや後の祭りですが、この部分は「filter」でpng画像だけに透過した黒を落とすことが出来たんだと思います。でも知らないことは思い至らないしし、限られた時間で形にしなければならない制約上、こんな無様な手を使った次第です。

　いろいろと苦い経験でした。
使わない/使えないけど、とりあえず知っておくだけで解決のとっかかりを掴めることはあると思うので、この辺注意していきたいと思った次第です。