Untitled

dabblet.css

.container {
  position: absolute;
  width: 400px;
  height: 400px;
  
  margin-left: 100px;
  margin-top: 50px;
  
  border: 3px dotted #DDD;
  overflow: hidden;
}

.container .img {
  position: absolute;
  width: 300px;
  height: 300px;
  vertical-align: middle;
  text-align: center;  
}

.container .img img {
  box-shadow: 0px 3px 19px #AAA;
}

.container .img.img1 {
}

.container .img.img2 {
  margin-top: 50px;
  margin-left: 300px;
}

.container .img {  
  transition-property: margin-left;
  transition-duration: 1000ms;
  transition-timing-function: default;
}

.container:hover .img.img1 {
  margin-left: -300px;
}

.container:hover .img.img2 {
  margin-left: 0;
}

dabblet.html

<div class="container">
	<div class="img img1"><img class="i" src="http://fotki.adams.yandex.ru:10081/get/0/22805354.0/0_32_923e3875_M" /></div>
	<div class="img img2"><img class="i" src="http://fotki.adams.yandex.ru:10081/get/0/22805354.0/0_31_6cd7fa8_M" /></div>
</div>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"all"}