Javascript 嵌套元素和背景

我的问题很具体。我希望我的第一个背景图像（花）平滑地出现在子元素的悬停上，并在第二个块的黄色区域上连续移动。但我不知道如何构造代码，这有可能吗？JSFIDLE链接在上面

HTML:

Javascript:

var block = document.getElementsByClassName("block1");

block[0].addEventListener('mouseover', addHover, false); 
block[0].addEventListener('mouseout', removeHover, false); 

function addHover() {
  this.parentNode.style.zIndex = 1; 

  this.style.zIndex = 1;
  document.getElementsByClassName("block2")[0].style.zIndex = 2;
}  

function removeHover() {
  this.parentNode.style.zIndex = "auto"; 
}

我们需要应用“overflow:hidden”属性，并通过以下方式添加另一个html元素：

HTML:

div#cont {
position: absolute;
top: 50px;
left: 150px;
width: 300px;
height: 200px;
border: 1px solid black;
}

div.background {
    position: absolute;
    width: 200px;
    height: 100%;
}

div.background1 {
    left: 50px;
    background: url("http://t1.gstatic.com/images?q=tbn:ANd9GcTQ3f9u43Q8JvUhsrNoQzN4RSk3FdeC-p4bLn64f9hLg8ebQqDJ");
}
div.background2 {
    left: 150px;
   background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcSIlqHe8rLgTYFQt3Dg-gqf-Z1psCs_TgZzJGsofdA1pg8UbMZiGg");
}

div.block {
    position: absolute;
    width: 100px;
    height: 100%;

    transition: width 0.5s;
}

div.block1 {
    background-color: red;
}
div.block2 {
    background-color: yellow;
}

div.block:hover {
    width: 200px;
    background-color: transparent;
}

var block = document.getElementsByClassName("block1");

block[0].addEventListener('mouseover', addHover, false); 
block[0].addEventListener('mouseout', removeHover, false); 

function addHover() {
  this.parentNode.style.zIndex = 1; 

  this.style.zIndex = 1;
  document.getElementsByClassName("block2")[0].style.zIndex = 2;
}  

function removeHover() {
  this.parentNode.style.zIndex = "auto"; 
}

<div id="cont">
    <div class="block block1">
        <div class="background"></div>
        <div class="door"></div>
    </div>
    <div class="block block2">
        <div class="background"></div>
        <div class="door"></div>
    </div>
</div>

div#cont {
    position: absolute;
    top: 50px;
    left: 150px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

div.block {
    position: absolute;
    width: 100px;
    height: 100%;
    overflow: hidden;

    transition: width 0.5s;
}

div.block1 {
    left: 50px;
}

div.block2 {
    left: 150px;
}

div.door {
    position: absolute;
    width: 100%;
    height: 100%;
}

div.block1 div.door {
    background-color: red;
}

div.block2 div.door {
    background-color: yellow;
}

div.background {
    position: absolute;
    width: 200px;
    height: 100%;
}

div.block1 div.background {
    background: url("http://t1.gstatic.com/images?q=tbn:ANd9GcTQ3f9u43Q8JvUhsrNoQzN4RSk3FdeC-p4bLn64f9hLg8ebQqDJ");
}

div.block2 div.background {
    background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcSIlqHe8rLgTYFQt3Dg-gqf-Z1psCs_TgZzJGsofdA1pg8UbMZiGg");
}

div.block:hover {
    width: 200px;
    z-index: 1;
}

div.block:hover div.door{
    background-color: transparent;
}