今修正担当しているページの件で、ディレクターさんに「今度これ作ってほしい!」って言われたので、予習してみる。画像をマウスオーバーした際に説明文が出てくるやつ。前に大先生が作ってたの見たけど復習してなかったやつ。

名付けて「夏の思い出2020」(大した思い出がない)

positionで画像の上に同じサイズの要素を乗っけて、マウスオーバーした際に下から移動してくるように指定。

ホバーしてない時は重ねた要素は下で透明になって隠れている。今回のはホバーした時の指定ではなく、ホバーしていないときを指定している。

※全てのコードは上記のcodesandboxを参照

とりあえず雰囲気掴めたからよしとしよう。
明日作成する時間あったらトライしてみようかな。

c.sakyou

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA