如何在我的投资组合中添加“加号/图标”？

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

这种风格显然必须应用于悬停 。

只需替换.projectshot a .over:hover{的background-color .projectshot a .over:hover{通过适当的background 。 您根本不需要div.plus ，也不需要div.inner （您可以从HTML中删除它们！）：

.projectshot a .over:hover{
    position: absolute;
    background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
    border-radius: 8px;
    height: 150px;
    width: 200px;
    margin: 10px;
}

这是更新的小提琴： http ： //jsfiddle.net/L8HX7/8/

Answer 2

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

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>

你可以使用一个：在psuedo元素之后叠加 - 但我想保持简单。 请记住，CSS声明从右到左阅读....“任何.plus - 执行此操作，当.block：hover”等----