如何在悬停时移动img标签顶部的背景图像

Question

试图解决这个问题长达数小时，但没有成功。我需要创建如下工作的css要求：http://s22.postimg.org/3xp5ut1gx/needed.jpg并且我必须使用所附的图像。覆盖：https://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。还可以通过切换设置背景位置的类来简化操作。。但你明白了。