css - 情報を含むサークル div、ホバーですべての情報を表示

Question

3 つの円形 div を隣り合わせにしたい (それは問題ではない)。円の下部には、情報テキストの最初の単語が表示されます。カーソルを合わせると、情報テキストが上に移動するので、テキスト全体を読むことができます。

私が最初にやろうとしたことは、div を作成width: 170pxしheight: 170px、CSS で円を背景として設定class:hoverし、テキストを表示することでした。

これを試みているときに気付いたのは、上に投稿した通常の写真のように、円の「後ろ」にあるテキストを非表示にできないことです。

これを行う最良の方法は何ですか？

Answer 1

img円の内側が透明なテキストの上に浮かぶ を (CSS 絶対配置を使用して) 作成します。詳しくはこちらをご覧ください。