Suponiendo que tienes varias imágenes (con fondo transparente) como la ultima que has puesto... con z-index y margin negativo es facil.
Aquí tienes un demo: http://www.drvy.net/cnt/demo/piezas.html
Saludos
Código (html4strict) [Seleccionar]
<div id="pruebas">
<ul>
<li class="rojo"></li>
<li class="amarillo"></li>
<li class="azul"></li>
<li class="verde"></li>
</ul>
</div>Código (css) [Seleccionar]
#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);}Aquí tienes un demo: http://www.drvy.net/cnt/demo/piezas.html
Saludos