一个图像应该在三角形框架中，在一个div内的悬停上溢出另一个图像

Question

我有三个包（上/中/下），每个包含用三角形分隔的图像。 “在悬停时”他们应该加载另一个图像并提高不透明度。 问题出在中间，物品非常接近。

.one-mid{
  background: url(https://s17.postimg.org/ekll4csdr/atlant.png);
  left: 0;
}
.one-mid:hover{
  position: absolute;
  background: url(https://s26.postimg.org/knjvw502x/atlant.png);
  left: 0;
  top:-41px;
  width:200px!important;
  height:282px!important;

}
.two-mid{
  left: -100px;
  transform: skew(141deg);
}
.two-mid:after{
  content: "";
  transform: skewX(-141deg);
  background: url(https://s17.postimg.org/71xdylupb/anichkov-bridge.png);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.two-mid:hover:after{
  position: absolute;
  transform: skewX(-141deg);
  left:83px;
  top:-15px;
  background: url(https://s26.postimg.org/kxrefhep5/anichkov-bridge.png);
  width:205px!important;
  height:254px!important;
}
.three-mid{
  left: 100px;
  transform: skew(141deg);
}
.three-mid:after{
  content: "";
  transform: skewX(-141deg);
  background: url(https://s17.postimg.org/9kj2zagfj/zingers-house.png);
  position: absolute;
  left:-100px;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.three-mid:hover:after{
  position: absolute;
  transform: skewX(-141deg);
  background: url(https://s26.postimg.org/7yu6q7jc9/zingers-house.png);
}
.four-mid{
  left:-100px;
  transform: skew(39deg);
}
.four-mid:after{
  content: "";
  transform: skew(-39deg);
  background: url(https://s17.postimg.org/xkg17btf3/krylov.png);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.four-mid:hover:after{
  position: absolute;
  transform: skewX(-39deg);
  background: url(https://s26.postimg.org/wcsgxugfd/krylov.png);
}
.five-mid{
  left:100px;
  transform: skew(39deg);
}
.five-mid:after{
  content: "";
  transform: skew(-39deg);
  background: url(https://s17.postimg.org/vq36pl6en/michaels-horse.png);
  position: absolute;
  left:-100px;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.five-mid:hover:after{
  content: "";
  transform: skew(-39deg);
  background: url(https://s26.postimg.org/w8u23ulk9/michaels-horse.png);
  position: absolute;
  left:-85px;
  top:-31px;
  width: 100%;
  height: 274px!important;
  z-index:-1;
}
.six-mid{
  left:-100px;
  transform: skew(141deg);
}
.six-mid:after{
  content: "";
  transform: skew(-141deg);
  background: url(https://s17.postimg.org/f3h12ro33/eliseevs-house.png);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.six-mid:hover:after{
  content: "";
  transform: skew(-141deg);
  background: url(https://s26.postimg.org/e3cic1wo9/eliseevs-house.png);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.seven-mid{
  left:100px;
  transform: skew(141deg);
}
.seven-mid:after{
  content: "";
  transform: skew(-141deg);
  background: url(https://s17.postimg.org/bil5jjjjj/kathrine.png);
  position: absolute;
  left:-100px;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.seven-mid:hover:after{
  position: absolute;
  transform: skewX(-141deg);
  left:-100px;
  background: url(https://s26.postimg.org/n8kv5x02x/kathrine.png);
}
.eight-mid{
  left:-100px;
  transform: skew(39deg);
}
.eight-mid:after{
  content: "";
  transform: skew(-39deg);
  background: url(https://s17.postimg.org/ocj7cvwz3/kazansky.png);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.eight-mid:hover:after{
  content: "";
  transform: skew(-39deg);
  background: url(https://s26.postimg.org/48ld5tsq1/kazansky.png);
  position: absolute;
}
.nine-mid{
  left:100px;
  transform: skew(39deg);
}
.nine-mid:after{
  content: "";
  transform: skew(-39deg);
  background: url(https://s17.postimg.org/5y8o8wkof/alex-the-_II.png);
  position: absolute;
  left:-100px;
  width: 100%;
  height: 100%;
  z-index:-1;
}
.nine-mid:hover:after{
  transform: skew(-39deg);
  background: url(https://s26.postimg.org/av80z0aeh/alex-the-_II.png);
  position: absolute;
  left:-85px;
  top:-30px;
  width: 100%;
  height: 270px!important;
  z-index:-1;
}
.ten-mid{
  background: url('https://s17.postimg.org/lq3ovy5rj/piter-the-woodwoker.png');
  left: 0;
}
.ten-mid:hover{
  position: absolute;
  background: url(https://s26.postimg.org/rx5geuend/piter-the-woodwoker.png);
  left: 0;
}

<div class="middle-bundle">
  <div class="mid-part left-sided-up">
    <div id='7' class="triangle one-mid"></div>
  </div>
  <div class="mid-part left-sided-down">
    <div id='8' class="triangle two-mid"></div>
    <div id='9' class="triangle three-mid"></div>
  </div>
  <div class="mid-part left-sided-up ">
    <div id='10' class="triangle four-mid"></div> 
    <div id='11' class="triangle five-mid"></div>
  </div>
  <div class="mid-part left-sided-down">
    <div id='12' class="triangle six-mid"></div>
    <div id='13' class="triangle seven-mid"></div>
  </div>
  <div class="mid-part left-sided-up">
    <div id='14' class="triangle eight-mid"></div> 
    <div id='15' class="triangle nine-mid"></div>
  </div>
  <div class="mid-part left-sided-down">
    <div id='16' class="triangle ten-mid"></div>
  </div>
</div>

完整代码在这里https://jsfiddle.net/o2b123p2/3/

我已经尝试用canvas或svg解决这个问题，但每种方法都有其缺陷。 我怎样才能管理中间捆绑工作，就像上层和下层一样完美。