css - 如何在鼠标悬停时将背景图像移动到 img 标签之上

Question

尝试解决这个问题已经好几个小时了，但都没有成功。我需要创建如下所示的 css要求:http://s22.postimg.org/3xp5ut1gx/needed.jpg我必须使用附加的图像。覆盖:http://i.stack.imgur.com/VNK86.png我没有找到不切割它的方法，但我必须在不切割的情况下进行。我知道它在背景位置区域的某个地方，但没能做到。将非常感谢您的帮助。代码非常简单:

<div id="large-box">
        <div id="image"><img src="images/101512asiatodaysoftbank1_167x94.jpg" alt="stock-img" id="large-img" />
            <div id="play-btn"></div>
        </div>
      <p class="large-desc">Billionaries Love These 5 Stocks</p>
    </div>

所以CSS:

#large-box {
overflow: hidden;
height: 260px;
width: 293px;
position:relative;}

#image {
height: 230px;
position:relative;
}

#image img{
max-width:293px;
max-height:230px;
}

#play-btn {
background-image:url(../images/play.png);
background-repeat:no-repeat;
position:absolute;
bottom:75px;
left:10px;
width:101px;
height:43px;
z-index:10;
cursor: pointer;
/* display:none; */
}

Answer 1

如果我没理解错的话，这就是您要查找的内容:http://codepen.io/BenMann/pen/hoyqD

但是您的图像(带有播放按钮)并不像看起来那样完全透明。它也不必那么大..如果您将其裁剪为仅包含两个播放按钮并且没有空白区域，您可以减小图像大小!

无论如何，请尝试修改 background-position: 0 -290px; 以使其完美匹配。

编辑

如果您需要悬停出现在整个图像上，我只是添加了一些 jQuery。也可以通过切换设置背景位置的类来使其更容易..但你明白了。