javascript - 在图像上悬停显示图像上的div

Question

我想要实现的是将鼠标悬停在图像上，在图像上显示悬停 div；我创建了这个 JsFiddle但我不完全知道如何实现我想要做的事情。

    .hover {
    	  background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
    	  height:75px;
    	  width:75px;
          background-size: contain;
          opacity:0.7;
          }

 <img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
    
    <div class="hover"></div>

Answer 1

<div class="img">
<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
<div id="hover"></div>
</div>

.img:hover #hover{
  display:block;
}

    #hover {
                background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
                height:75px;
                width:75px;
          background-size: contain;
          opacity:0.7;
          position:absolute;
          left:0;
          top:0;
          display:none;
    }

工作 fiddle https://jsfiddle.net/kcdued0s/3/