como hacer este efecto sobre la imagen...

[pzin]

Es simplemente un elemento oculto que cambia su posición al pasar el mouse sobre el padre. Luego con overflow se oculta el contenido que sobresale cuando está oculto.

Por ejemplo, algo así:

Código HTML:

<div>
  Hola hola
  <p>Esto está oculto</p>
</div>
 

Código CSS:

div {
  position: relative;
  width: 100px;
  height: 100px;
  background: gray;
  overflow: hidden;
}
 
p {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 100px;
  margin: 0;
  background: rgba(255,255,255,.5);
  transition: top .5s;
}
 
div:hover p {
  top: 0;
}
 

No lo probé, no sé si pudiera tener algún fallo. Para transition tendrás que usar algún que otro prefijo propietario como -webkit, -moz y demás.