CSS - Transistion applied to moving background

by Ben Clayton

HTML

<div class="bk1">
  <div class="bk2">
  </div>
   <div class="bk3">
  </div>

</div>

CSS

.bk1 {
  background-image: url('http://weknowyourdreams.com/images/sky/sky-01.jpg');
  height: 500px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.bk2 {
  background-image: url('//upload.wikimedia.org/wikipedia/commons/a/ab/Monty_python_foot.png');
  height: 300px;
  width: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0px -320px;
  position: absolute;
  top: 0px;
  -webkit-transition: background-position 1s;
  /* Safari */
  transition: background-position 1s;
  /*border:1px solid red;*/
}

.bk2:hover {
  background-position: 0px 0px;
}

.bk3 {
  background-image: url('//upload.wikimedia.org/wikipedia/commons/a/ab/Monty_python_foot.png');
  height: 300px;
  width: 300px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0px -320px;
  position: absolute;
  top: 0px;
  left:100px;
  -webkit-transition: background-position 1s;
  /* Safari */
  transition: background-position 1s;
}

.bk3:hover {
  background-position: 0px 0px;
}