Übergang css mit Hover

Question

Ich versuche, einen Übergang zu tun, dass es unter mit einer Verzögerung kommt, aber ich verstehe es nicht.

Ich möchte nur CSS, keine jquery oder js verwenden. Hover funktioniert, aber nicht der Übergang.

Jeder kann mir helfen?

Edit: Einige mögen das: link. Die folgenden Beispiele

.tools-link { 
 
    text-align: center; 
 
} 
 
.tools { 
 
    margin: 15px 0; 
 
    text-align: center; 
 
    height: 280px; 
 
    overflow: hidden; 
 
} 
 
.tool-dedicaciones-slide-title { 
 
    height: 50px; 
 
    margin: 20px 0 5px; 
 
    width: 100%; 
 
    top: 50%; 
 
    transform: translateY(25%); 
 
} 
 
.tool-dedicaciones-slide { 
 
    padding: 10px 10%; 
 
    background-color: #fff; 
 
    height: 100%; 
 
} 
 
.tool-dedicaciones-slide:hover { 
 
    position: absolute; 
 
    top: 0; 
 
    transition: all .4s ease-in-out .1s; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
        <div class="col-xs-12 col-sm-6 col-md-15 tools tool-dedicaciones"> 
 
         <a class="remove-underline tools-link" href=""> 
 
          <!-- <img src="/assets/img/tools/01-maiap-02.png" class="image-dedicaciones"/> --> 
 
          <div style="background-color: #725d98; height: 200px; "></div> 
 
          <div class="tool-dedicaciones-slide"> 
 
           <div class="tool-dedicaciones-slide-title" >Dedicacion@s</div> 
 
           <div class="tool-dedicaciones-slide-description"> 
 
            <p>Herramienta para el control y la gestión de dedicaciones profesionales. Autentificación y autorización en servicios terceros. Control de caducidad del Token de sesión. BDD encriptada.</p> 
 
           </div> 
 
          </div> 
 
         </a> 
 
        </div>

Answer 1

nicht sicher, was Sie versuchen, den Übergang zu, gelten, aber im Allgemeinen Sie haben zu tun, sowohl die Eigenschaft in definieren den „normalen“ Zustand und den Schwebezustand.

Beispiel:

<style> 
.box { 
    width:500px; 
    height:500px; 
    background-color:blue; 
    transition:0.5s all 0.5s; 
} 
.box:hover { 
    background-color:red; 
} 
</style> 
<div class="box"></div> 

https://jsfiddle.net/7zszjbw0/