How can I add a “plus sign/icon” to my portfolio shots???

Question

I am trying to add a "plus sign" (its a .png file) to my portfolio section. My goal is to make this "plus sign" visible only when customers are hovering with mouse pointer over my projects but in the same time I want to keep the background-color property which I already set up.

However, my plus sign doesn't show up!? How can I do that???

On this website you can see the similar effect: http://bjorsberg.se/

Here is my JSFiddle: http://jsfiddle.net/L8HX7/

This is a part of my CSS (from JSFiddle) that needs to be 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 is example of a plus sign I want to add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png

Answer 1

The style obviously has to be applied on hover .

Just replace the background-color in .projectshot a .over:hover{ by the appropriate background . You don't need the div.plus at all, and neither do you need div.inner (you can remove those from the 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;
}

Here's the updated Fiddle: http://jsfiddle.net/L8HX7/8/

Answer 2

Here is a really broken down example.

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>

You could use an :after psuedo element for the overlay - but I wanted to keep it simple. Keep in mind that CSS declarations read from right to left .... "any .plus - do this, when .block:hover" etc ----