suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Fügen Sie vor und nach dem Hover-Overlay verzögerte Inhalte hinzu

<p>Wenn ich mit der Maus über ein Div fahre, möchte ich eine Überlagerung haben, die von links nach rechts gleitet und nach einer Verzögerung von 1 Sekunde der Inhalt sichtbar wird. Das ist mein HTML-Code: </p> <p><br /></p> <pre class="brush:css;toolbar:false;">/* overlay */ .overlay { Position: absolut; unten: 0; links: 0; rechts: 0; Hintergrundfarbe: rgba(255, 255, 255, 0,9); Überlauf versteckt; Breite: 0; Höhe: 100 %; Übergang: .5s Leichtigkeit; } .dv-each:hover .overlay { /* Übergangsverzögerung: 0,4 s */ Übergang: .5s Easy-in-out; Breite: 100 %; } .overlay-content { Position: absolut; oben: 50 %; links: 50 %; -webkit-transform: Translate(-50%, -50%); -ms-transform: Translate(-50%, -50%); transform: Translate(-50%, -50%); Leerraum: nowrap; }</pre> <pre class="brush:html;toolbar:false;"><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="{{ asset('image/TrangChu/rectangleLogo4.png') }}" 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"> {{-- Etwas Text --}} </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></pre> <p><br /></p> <p>Wenn Sie mit der Maus über das Bild fahren, können Sie den weißen Hintergrund der Folie sehen und den darin enthaltenen Inhalt sehen. Ich möchte die Anzeige um 1 Sekunde verzögern. kannst du mir helfen? Danke. </p>
P粉731861241P粉731861241565 Tage vor655

Antworte allen(1)Ich werde antworten

  • P粉797855790

    P粉7978557902023-08-03 12:30:27

    希望这是您所寻找的。

    请更改照片的URL。我使用了从互联网上找到的一张照片。



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


    Antwort
    0
  • StornierenAntwort