CSS - Transistion applied to moving background

by Ben Clayton

HTML

<div class="bk1">
<div class="bk2">
</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:200px;
  width:500px;
  background-size: contain;
  background-repeat:no-repeat;
  position:absolute;
  top:-220px;
      -webkit-transition: top 1s; /* Safari */
    transition: top 1s;

}

.bk1:hover .bk2 {
  top:0px;
}