css - サムネイル画像の上にhtml要素を追加する方法

Question

ギャラリーにサムネイル画像のリストがあり、このようなものをどのように作成するのか疑問に思っていました。

私の理解で可能な唯一の方法は、サムネイルをdiv内の背景画像として作成し、それらの要素をその上に表示することです。これを行う別の方法はありますか？

Answer 1

画像の兄弟としてオーバーレイのものを含む div を使用して、画像の周りにラッパー div を使用して、おそらくこのようなことを達成できます:-

<div class='image'>
  <img src='' />
  <div class='image__overlay'></div>
</div>

次に、CSS は次のようになります。

.image {
  position: relative;
}
.image__overlay {
  position: absolute;
  top: 0;
  left: 0;
}

オーバーレイを aで非display: none表示にし、div.image の :hover にのみ表示することができます。それが目的である場合です。