html - How can I add a "plus sign/icon" to my portfolio shots??? -

i trying add "plus sign" (its .png file) portfolio section. goal make "plus sign" visible when customers hovering mouse pointer on projects in same time want keep background-color property set up.

however, plus sign doesn't show up!? how can that???

on website can see similar effect: http://bjorsberg.se/

here jsfiddle: http://jsfiddle.net/l8hx7/

this part of css (from jsfiddle) needs fixed:

.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; } 

here example of plus sign want add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/very-basic-plus-icon.png

the style has applied on hover.

just replace background-color in .projectshot .over:hover{ appropriate background. don’t need div.plus @ all, , neither need div.inner (you can remove html!):

.projectshot .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; } 

here’s updated fiddle: http://jsfiddle.net/l8hx7/8/