如何在我的投資組合中添加“加號/圖標”？

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”等----