Youtubeの動画やfreepikのように、画像にホバーすると画像にオーバレイすると、メニューが出てきて、メニューの背景にはグラデーションが掛かったデザインがありますが、それを実現するサンプルです。
See the Pen QWNxvgW by emesh (@emesh) on CodePen.
定義要件としては、
1.ホバーすると画像がグラデーションになる
2.下にメニューが表示される
3.画像からでもリンクできると言う点が必要でした。
まずグラデーションはHTMLにマスクの要素を用意し、それをCSSで調整するようにしています。画像のリンクはそのままではできないのでよくある要素全体に拡大するコードを使っていますが、そのコードではメニューにも影響を及ぼし、文字が一つの場所に集合してしまうというバグにも影響が及ぼすので下記のコードでpositionをキャンセルさせることにしています。
figcaption a {
position: initial !important;
color: #fff;
}
参考になりましたらどうぞ。
おまけ
ホバーするとメニューが表示するのではなく常時メニューを表示させたい場合にはこちらを。
See the Pen メニューを常時表示したいとき by emesh (@emesh) on CodePen.