[Tailwind CSS]要素を上にスライドさせるtransitionをつけたいが要素がピクピクしてしまう

Question

前提・実現したいこと

Reactで自己紹介用ポートフォリオサイトを作っています。

うえのようなボックスをTailwind CSSで作りたいです。
マウスホバーするとマイナスのmargin-topが適応されて、
overflow-hiddenによって隠されていた文字列が下から出現する感じです。

発生している問題・エラーメッセージ

見ての通りグチャグチャになってしまっています...
tailwind cssだけでは難しいのでしょうか？
そもそもなぜピクピクしてしまうのでしょうか？

該当のソースコード

return (
    // hoverすると上に移動
    <Link {...linkProps}>
      <a className="w-44 h-52 xl:h-44 bg-blue-200  m-5 cursor-pointer border-2 border-gray-300 text-center overflow-hidden">
        <div className="flex justify-center items-center my-4 xl:transition-all xl:duration-500 xl:ease-in-out xl:mt-0 xl:h-full xl:hover:-mt-36 ">
          <Image className="" {...imgProps} alt="コンテンツの画像" />
        </div>
        <span className="">{name}</span>
      </a>
    </Link>
  );

試したこと

あるサイトによれば
backface-visibility: hidden;で解決できる？ようなのですがTailwind CSSにはそれに該当するクラスがないです。

Answer 1

return (
    // hoverすると上に移動
    <Link {...linkProps}>
      <a className="w-44 h-44 bg-blue-200 m-5 group overflow-hidden">
        <div className="h-full flex justify-center items-center xl:transition-all xl:duration-500 xl:ease-in-out transform group-hover:-mt-44">
          <Image className="h-full" {...imgProps} alt="コンテンツの画像" />
        </div>
        <div className="h-full flex justify-center items-center ">
          <span className="">{name}</span>
        </div>
      </a>
    </Link>
  );

Answer 2

コード見る限り、imgを入れてるdivにのみアニメーション適用しているから、
spanまで行くと止まって戻り、戻るとまたdivに掛かってピクピクして見えるのかなぁと。

divにspanを入れてしまうか、divとspanが両方入っているaにアニメーションを付けるか。
新しいdivでdivとspanを囲ってそのdivにアニメーションを付けるか…
お好みの方法でどうぞ～

Comments

[moyong]

>>spanまで行くと止まって戻り、戻るとまたdivに掛かってピクピクして見えるのかなぁと。
なるほど、と思いました
「親のa要素にhoverした時に子のImageを囲うdivを移動させる」みたいな発想で解決できました！

[moyong]

間違えて僕の解決方法のほうをBAにしてしまいました...コメントくださったのに申し訳ありませんm(__)m

[退会済みユーザー]

＠moyong様
解決おめでとうございます～

余談ですがBAは選び直せるらしいですよ？
僕質問したことないので詳細は分かりかねますがっ
他の人からツッコミ入れられる気がするので、
一応知識として心の奥に留め置いていただければ幸いです。

[Lhankor_Mhy]

BAは変更できますよ。
（かぶった）

[K_3578]

一応明確に方法を。
自己回答の高評価、低評価の欄の左に「未解決に戻す」が薄ーく表示されてるのでそこ押してみてください。

[moyong]

みなさまありがとうございます！！

[退会済みユーザー]

みなさまありがとうございますっ
（まえにならえ）