html - 如何将 "plus sign/icon"添加到我的投资组合照片中？？？

Question

我正在尝试向我的投资组合部分添加一个“加号”(它是一个 .png 文件)。我的目标是仅当客户将鼠标指针悬停在我的元素上时才使这个“加号”可见，但与此同时我想保留我已经设置的背景颜色属性。

但是，我的加号没有出现!？我该怎么做？？？

在这个网站上你可以看到类似的效果:http://bjorsberg.se/

这是我的 JSFiddle:http://jsfiddle.net/L8HX7/

这是我的 CSS(来自 JSFiddle)的一部分，需要修复:

.plus{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -49px 0 0 -56px;
    background: url(img/plus.png) center center no-repeat;
}

这是我要添加的加号示例:http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png

Answer 1

这是一个真正分解的例子。

http://jsfiddle.net/sheriffderek/UVvWm/

CSS

.block {
    position: relative; /* so the .plus knows what to be relative to */
    display: block;
    width: 10em;
    height: 10em;
    background-color: red;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
}


.block:hover .overlay {
    background-color: rgba(0,0,0,.5);
}

.block .plus {
    display: none;
}

.block:hover .plus {
    display: block;
}



/* to position the .plus */
.plus {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

HTML

<a href="#"class="block">

    <div class="overlay"></div>

    <img class="plus" src="http://placehold.it/100x100" />

</a>

您可以使用 :after 伪元素作为叠加层 - 但我想保持简单。请记住，CSS 声明是从右到左阅读的……“任何 .plus - 在 .block:hover 时执行此操作”等 ----