ホバーオーバーレイの前後に遅延コンテンツを追加する

Question

div 上にマウスを移動すると、オーバーレイが左から右にスライドし、1 秒後にコンテンツが表示されるようにしたいと考えています。これは私の HTML コードです:

/* オーバーレイ */

。かぶせる {
  位置: 絶対;
  下: 0;
  左: 0;
  右: 0;
  背景色: rgba(255, 255, 255, 0.9);
  オーバーフロー: 非表示;
  幅: 0;
  高さ: 100%;
  トランジション: 0.5 秒の簡単さ。
}

.dv-each:hover .overlay {
  /* 遷移遅延: 0.4 秒; */
  トランジション: 0.5 秒のイーズインアウト。
  幅: 100%;
}

.overlay-content {
  位置: 絶対;
  トップ: 50%;
  左: 50%。
  -webkit-transform: 変換(-50%, -50%);
  -ms-transform: 変換(-50%, -50%);
  変換: 変換(-50%, -50%);
  ホワイトスペース: ナラップ;
}

<div class="col-12col-md-5col-lg-4p-0m-1dv-eachposition-relativeh- 75">
  <a href="{{route('xdsoft.tintuc')}}">
    <img src="{{asset('image/TrangChu/rectangleLogo4.png') }}" class="img-fluid w-100" alt="...">
    <div class="オーバーレイ">
      <div class="テキスト w-100 h-100 オーバーレイコンテンツ px-3 py-4">
        <div class="fs-4">
          {{-- テキスト --}}
        </div>
        {{--
        <div style="display: flex; justify-content: flex-end;">
          <a href="{{route('xdsoft.thietke')}}">
            <div class="bg-145982 text-white p-2">Xem thêm</div>
          </a>
        </div> --}}
      </div>
    </div>
  </a>
</div>

画像の上にマウスを置くと、白い背景のスライドとその中のコンテンツが表示されます。表示を1秒遅らせたい。手伝ってもらえますか？ありがとう。

Answer 1

これがあなたが探しているものであることを願っています。

写真のURLを変更してください。ネットで見つけた写真を使用させていただきました。

リーリー リーリー