Demo:

HTML kód:

<div class="pulloutimage" style="width:245px; height:168px">

<img class="original" src="képed url címe" />

<img class="ondemand" src="képed url címe" />

</div>

</div>

CSS kód:

<style>

 

.pulloutimage{

  position: relative;

}

 

.pulloutimage img{

  position: absolute; 

  left: 0;

}

 

.pulloutimage img.ondemand{ 

  opacity: 0;

  visibility: hidden; 

}

 

.pulloutimage img.original{

  z-index: 1; 

}

 

 

@-webkit-keyframes revealfromright{

  0%{

  z-index: -1;

  opacity: 0;

  }

  50%{ 

  opacity: 1;

  z-index: -1;

  left: 100%;

  box-shadow: none;

  }

  51%{ 

  z-index: 2;

  }

  100%{ 

  left: 0;

  box-shadow: 8px 8px 15px gray;

  }

}

 

@-moz-keyframes revealfromright{

  0%{

  z-index:-1;

  opacity:0;

  }

  50%{

  opacity:1;

  z-index:-1;

  left:100%;

  box-shadow: none;

  }

  51%{

  z-index:2;

  }

  100%{

  left:0;

  box-shadow: 8px 8px 15px gray;

  }

}

 

@-ms-keyframes revealfromright{

  0%{

  z-index:-1;

  opacity:0;

  }

  50%{

  opacity:1;

  z-index:-1;

  left:100%;

  box-shadow: none;

  }

  51%{

  z-index:2;

  }

  100%{

  left:0;

  box-shadow: 8px 8px 15px gray;

  }

}

 

 

.pulloutimage:hover img.ondemand{ 

  -webkit-animation-name:revealfromright;

  -webkit-animation-duration: 1s;

  -webkit-animation-iteration-count: 1;

  

  -moz-animation-name:revealfromright;

  -moz-animation-duration: 1s;

  -moz-animation-iteration-count: 1;

  

  -ms-animation-name:revealfromright;

  -ms-animation-duration: 1s;

  -ms-animation-iteration-count: 1;

  

  animation-name:revealfromright;

  animation-duration: 1s;

  animation-iteration-count: 1;

  

  visibility:visible;

  opacity:1;

  box-shadow: 8px 8px 15px gray;

  z-index:2;

}

 

.pulloutimage:hover img.original{

  opacity:0.5;

}

 

</style>