si no deseas usar frameworks te propongo las siguiente solución:
Usar un div contenedor de la imagen y un div hermando de la imagen donde se guarda la descripción del evento hover.
luego capturar el evento hover para el div padre, para ocultar y mover el div de la descripción con css y jquery.
otra opción es usar animate.css para realizar los efectos de movimiento.
HTML:
<body>
<div class="contenedorImg">
<img src="http://lorempixel.com/400/200/" />
<div class="contenedorDescripcion">Contenido de la descripción</div>
</div>
</body>
CSS:
body{
margin: 0;
}
.contenedorImg{
width: 400px;
}
.contenedorDescripcion {
color : #FFF;
width: 400px;
height: 200px;
position: absolute;
top:200px;
left:0;
background: rgba(0,0,0,0.5);
visibility: hidden;
transition: top 0.5s;
}
.muestraDescripcion{
top: 0 !important;
}
.hidden{
visibility: hidden !important;
}
.visible{
visibility: visible !important;
}
Javascript (JQuery)
$(document).ready(function(){
$(".contenedorImg").hover(
function(){
$(".contenedorDescripcion").addClass("visible muestraDescripcion");
},
function(){
$(".contenedorDescripcion").removeClass("muestraDescripcion");
setTimeout(
function(){
$(".contenedorDescripcion").removeClass("visible muestraDescripcion");
$(".contenedorDescripcion").addClass("hidden");
}, 300);
}
);
});
Revisa el ejemplo andando, el mouseleave al bajar el div se puede comportar un poco raro, pero basta con un poco de más codigo js!
https://jsfiddle.net/camilocalderont/svg9ho0m/