<p>Lorsque je survole un div, je souhaite avoir une superposition qui glisse de gauche à droite, puis après un délai d'une seconde, le contenu devient visible. Voici mon code HTML : </p> <p><br /></p> <pre class="brush:css;toolbar:false;">/* superposition */ .superposition { position : absolue ; bas : 0 ; gauche : 0 ; à droite : 0 ; couleur d'arrière-plan : rgba (255, 255, 255, 0,9) ; débordement caché; largeur : 0 ; hauteur : 100 % ; transition : facilité de 0,5 s ; } .dv-each: survol .overlay { /* délai de transition : 0,4 s ; transition : facilité d'entrée et de sortie de 0,5 s ; largeur : 100 % ; } .overlay-content { position : absolue ; haut : 50 % ; gauche : 50 % ; -webkit-transform : traduire (-50 %, -50 %); -ms-transform : traduire (-50 %, -50 %); transformer : traduire (-50 %, -50 %); espace blanc : nowrap ; }</pré> <pre class="brush:html;toolbar:false;"><div class="col-12 col-md-5 col-lg-4 p-0 m-1 dv-chaque position-relative h- 75"> <a href="{{ route('xdsoft.tintuc')}}"> <img src="{{ actif('image/TrangChu/rectangleLogo4.png') }}" class="img-fluid w-100" alt="..."> <div class="superposition"> <div class="text w-100 h-100 overlay-content px-3 py-4"> <div class="fs-4"> {{-- Du texte --}} </div> {{-- <div style="display: flex; justifier-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></pre> <p><br /></p> <p>Lorsque vous survolez l'image, vous pouvez voir la diapositive sur fond blanc et le contenu à l'intérieur se révéler. Je souhaite retarder l'affichage d'une seconde. pouvez-vous m'aider? Merci. </p>

  .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>