¿Como hacer con CSS Efecto cortina o persiana en las cuatro direcciones?

[pzin]

Para cambiarlo a la izquierda, habría que flotar .imagen_recuadro y .detalles_recuadro, para no añadir otro elemento se le da un ancho al elemento A —para lo cual hay que convertirlo en elemento de bloque— y luego el margen negativo se le da para la izquierda.
Para hacerlo hacia la derecha, el proceso es parecido pero habría que flotar un elemento a la derecha y el otro a la izquierda —y así no tocar HTML.

Código CSS:

.recuadro {
  position: relative;
  width: 193px;
  height: 260px;
  overflow: hidden;
  border: 1px solid #ccc;
}
  
.recuadro a {
  text-decoration: none;
  color: #000;
    display: block;
    width: 386px;
}
  
.imagen_recuadro, .detalles_recuadro {
  padding: 10px;
  height: 240px;
    width: 173px;
    float: left;
}
  
.imagen_recuadro {
  margin-top: 0;
  background: #000000;
 
  -webkit-transition-property: margin-left;
  -webkit-transition-duration: .9s;
  
  -moz-transition-property: margin-left;
  -moz-transition-duration: .9s;
  
  -o-transition-property: margin-left;
  -o-transition-duration: .9s;
  
  -ms-transition-property: margin-left;
  -ms-transition-duration: .9s;
 
}
  
.detalles_recuadro {
  background: #EEEEEE;
  color: #666666;
  font-family: Arial;
  font-size: 12px;
}
 
.recuadro:hover .imagen_recuadro {
    margin-left: -193px;
}
 

Para hacer el efecto hacia abajo supongo que no habrá otra forma que dándole posición relativa a A, y luego posiciones absolutas a la imagen y al texto de tal forma que intercambiaran sus posiciones respecto a cómo están en el HTML.