<div id="pruebas">
  <ul>
    <li class="rojo"></li>
    <li class="amarillo"></li>
    <li class="azul"></li>
    <li class="verde"></li>
  </ul>
</div>

#pruebas {}
#pruebas ul {list-style:none;}
#pruebas ul li {
   display:inline-block;
   width:300px; height:393px;
   margin-left:-200px;
   position:relative;
   transition:margin 0.2s ease-in;
}
#pruebas ul li:hover {margin-left:0 !important; cursor:pointer;}
 
.rojo {margin-left:0px !important; z-index:900; background:url(rojo.png);}
.amarillo {z-index:800; background:url(amarillo.png);}
.azul {z-index:700; background:url(azul.png);}
.verde {z-index:600; background:url(verde.png);}