Tambahkan kandungan tertunda sebelum dan selepas tindanan tuding

Question

Apabila saya menuding di atas div, saya mahu mempunyai tindanan yang meluncur dari kiri ke kanan dan kemudian selepas kelewatan 1 saat kandungan itu kelihatan. Ini ialah kod HTML saya:

/* tindanan */

.overlay {
  jawatan: mutlak;
  bawah: 0;
  kiri: 0;
  kanan: 0;
  warna latar belakang: rgba(255, 255, 255, 0.9);
  limpahan: tersembunyi;
  lebar: 0;
  ketinggian: 100%;
  peralihan: .5s mudah;
}

.dv-each:hover .overlay {
  /* kelewatan peralihan: 0.4s;
  peralihan: .5s kemudahan-keluar;
  lebar: 100%;
}

.overlay-content {
  jawatan: mutlak;
  atas: 50%;
  kiri: 50%;
  -webkit-transform: terjemah(-50%, -50%);
  -ms-transform: terjemah(-50%, -50%);
  mengubah: terjemah(-50%, -50%);
  white-space: nowrap;
}

<div class="col-12 col-md-5 col-lg-4 p-0 m-1 dv-setiap kedudukan-relatif h- 75">
  <a href="{{ route('xdsoft.tintuc')}}">
    <img src="{{ asset('image/TrangChu/rectangleLogo4.png') }}" class="img-fluid w-100" alt="...">
    <div class="overlay">
      <div class="teks w-100 h-100 tindanan-kandungan px-3 py-4">
        <div class="fs-4">
          {{-- Beberapa teks --}}
        </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>

Apabila anda menuding pada imej, anda boleh melihat slaid latar belakang putih dan kandungan di dalamnya mendedahkan. Saya mahu menangguhkan paparan selama 1 saat. boleh kamu bantu saya? Terima kasih.

Answer 1

Semoga inilah yang anda cari.

Sila tukar URL foto. Saya menggunakan foto yang saya dapati di internet.

  .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
  transition-delay: 1s;
  /* Set Delay Duration */
}

.dv-each:hover .overlay {
  transition: .5s ease-in-out;
  width: 100%;
  transition-delay: 0s;
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1s ease;
  .dv-each:hover .overlay-content {
    opacity: 1;
  }

<div class="col-12 col-md-5 col-lg-4 p-0 m-1 dv-each position-relative h-75">
  <a href="{{ route('xdsoft.tintuc')}}">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" class="img-fluid w-100" alt="...">
    <div class="overlay">
      <div class="text w-100 h-100 overlay-content px-3 py-4">
        <div class="fs-4">
          Text Displayed after Delay
        </div>
        <div style="display: flex; justify-content: flex-end;">
          <a href="{{ route('xdsoft.thietke')}}">Text Displayed after Delay
                                <div class="bg-145982 text-white p-2"></div>
                              </a>
        </div>
      </div>
    </div>
  </a>
</div>