Transition css with hover - html

Question

I am trying do a transition, that it comes out below
with a delay but I do not get it.
I only want to use CSS, no jquery or js.
Hover works,but not the transition.
Anyone can help me?
Edit: Some like this: link. The examples below
.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

Not sure what you are trying to apply the transition to, but generally you have do define the property in both the "normal" state and the hover state.
Example:
<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/