HTML、CSS 悬停在图像上

Question

我正在学习 html 和 css，但我遇到了一些麻烦。现在，我正在制作一个网站，该网站包含不同 w 大小的小图像。关键是，当您将鼠标悬停在它们上面时，它们会显示可点击的元素，而我无法在它们上面找到正确的位置。

我有什么:

我想要的:

部分代码:

            <div class="photo">
                <img src="http://placekitten.com/400/300" alt="image"/>
                <div class="zoom">
                </div>
                <div class="all">
                </div>
                <div class="link">
                </div>
                <div class="info">
                </div>
                <div class="like">
                </div>
            </div>

CSS:

.photo img {
    float:left;
    width:auto;
    height:auto;
}

.photo:hover {
    display: block;
    opacity:0.6;
}
.photo:hover .zoom {
    position: absolute;
    background-image:url(http://www.kolazhgostar.com/images/small-img05.png);
    background-repeat:no-repeat;
    width:46px;
    height:50px;
    background-position:center;

http://jsfiddle.net/zzu87/

Answer 1

如果您使用position: absolute，您需要为每个图像添加一些定位。尝试这样的事情:

.photo:hover .zoom {
  position: absolute;
  top: 50%;
  left: 200px;
  background-image: url(http://www.kolazhgostar.com/images/small-img05.png);
  background-repeat: no-repeat;
  width: 46px;
  height: 50px;
  background-position: center;
}