如何在图像顶部制作图像触发第一张图像的悬停效果？

Question

我为一张图片制作了悬停效果。

然后我在该图像的顶部添加了一个播放按钮图像。

当我将鼠标悬停在背景图像上时会添加一种色调效果，但当我将鼠标悬停在播放按钮上时，悬停效果就消失了......

关于如何使这项工作的任何想法？

以下是codepen：http://codepen.io/giorgiomartini/pen/waKbde

HTML：

<div class="col-xs-12 col-md-6 img-item">
  <a href=" https://booming-games.com/games/play_demo/danger_underwater/hd?locale=en ">
    <div class="wrap">
      <figure class="tint">
        <img class="image" src="https://booming-games.com/dangerUnderwater/images/Desktop_Frame.jpg">
      </figure>
    </div>
    <img class="play" src="http://www.clipartbest.com/cliparts/Mdi/7gq/Mdi7gq5c9.png" >
  </a>
</div>

CSS：

.play  {
  position: absolute;
  width: 20%;
  top: 0;
  left: 0;
  margin-left: 39%;
  margin-top: 20%;
}

.wrap {
    overflow: hidden;
    width: 840px;
    margin: auto;
    max-width: 100%;
  }

  .tint {
    overflow: hidden;
    float: left;
    background: blue;
    /*margin: 0 20px 20px 0;*/
    background: #F43C4A;
  }

  .image{
    max-width: 100%;
    float: left;
    display: block;
    -moz-transition: opacity .3s linear;
    -webkit-transition: opacity .3s linear;
    -ms-transition: opacity .3s linear;
    -o-transition: opacity .3s linear;
    transition: opacity .3s linear;
  }

  .image:hover {
    opacity: 0.5;
    cursor: pointer;
  }

谢谢！