Display-Div-Overlay auf :schweben mit CSS3 Erleichtern-Übergänge

Habe ich das overlay in Arbeit :hover. Allerdings möchte ich hinzufügen eine Leichtigkeit-im übergang mit CSS3. Kann nicht scheinen zu finden, eine funktionierende version online.

Den code!

Also ich habe ein div enthält nur ein Bild. Wenn ich den Mauszeiger über es, es zeigt eine farbige überlagerung mit 2-text-Elemente.

<div class="item">
     <img src="assets/images/blah.jpg" class="image">
         <a class="overlay" href="#">
            <h3 class="title">Some title</h3>
            <div class="description">
              <h4>Lorem ipsum dolor sit amet. consectetur adipisicing elit.</h4>
            </div>
         </a>
</div>

Für mein CSS, habe ich die transition-code:

.item {
  position: relative;
  background-color: white;
  -webkit-transition: background-color 2s ease-in; 
  transition: background-color 2s ease-in; 
}

.overlay {
  background: white;
  position: absolute;
  display: none;
 }

.item:hover .overlay{
   display:block;
   background-color: black;
}

Jedoch dieser übergang Effekt, es funktioniert nicht! Bitte um Hilfe!!

Muss ich ändern, den übergang zu nutzen display oder all ?

Ich habe eine jsfiddle hat die :hover-arbeiten, nur ohne die animation.

Sehr geschätzt

Link: https://jsfiddle.net/jonahmclachlan/nwhzLu1g/2/

  • display ist nicht ein transitionable Eigenschaft. Ändern Sie es aus none zu block auf schweben und so wird es nie den übergang.
  • stackoverflow.com/a/6943704/4334348
  • Danke Jungs! Das macht Sinn. Ich dachte, dass display: block war es zu töten
InformationsquelleAutor Jonah M | 2016-02-19
  1. 2

    Müssen Sie zum ändern der display-mit einer Deckkraft zum Beispiel, und fügen Sie die Umstellung auf das overlay, nicht auf das Element.

    Sehen, dass es funktioniert:

    CSS:

    .item {
  position: relative;
  background-color: white;
}

.overlay {
  background: white;
  position: absolute;
  opacity: 0;
  -webkit-transition: background-color 2s ease-in, opacity 2s ease-in; 
  transition: background-color 2s ease-in, opacity 2s ease-in; 
 }

.item:hover .overlay{
   background-color: black;
   opacity: 1;
  -webkit-transition: background-color 2s ease-in, opacity 2s ease-in; 
  transition: background-color 2s ease-in, opacity 2s ease-in; 
}

    HTML:

    <div class="item">
     <img src="assets/images/blah.jpg" class="image">
         <a class="overlay" href="#">
            <h3 class="title">Some title</h3>
            <div class="description">
              <h4>Lorem ipsum dolor sit amet. consectetur adipisicing elit.</h4>
            </div>
         </a>
</div>

    • Dank Marcos, warum brauche ich zu erklären, dass die übergänge doppelt?
    • Die erste ist, um den übergang auf die Maus verlassen, und die zweite ist, um den übergang auf mouseover. WENN Sie entfernen die erste transition, sehen Sie den übergang nur auf hover, aber nicht, wenn man beim verlassen der Maus über.
    • Bitte upvote, wenn du kannst 🙂
    • Ah ja, die in-und out - das sieht besser aus, eigentlich.
    • Vielleicht möchten Sie hinzufügen visibility: hidden wo nach war display:none, zu vermeiden, bewegen Sie den Mauszeiger auf das overlay.
    • das code-snippet wird nicht mehr ausgeführt
    • ja es läuft
    • Okay, ja, es ist, aber der Bild link ist gebrochen und ich wusste gar nicht versuchen...

    InformationsquelleAutor Marcos Pérez Gude
Schreibe einen Kommentar