Próbuję stworzyć responsywną siatkę obrazów (z opisami), które po przejechaniu będą miały kolorową nakładkę (tylko obraz, a nie tekst). Ze względu na czułe wysokości obrazów mam problem, w którym nakładka pokrywa wszystko, a nie tylko obraz.

W jakikolwiek sposób mogę to naprawić?

Odtworzyłem problem tutaj, aby ułatwić zrozumienie:http://jsfiddle.net/r8rFc/

Oto mój HTML:

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div>
                <img src="http://placehold.it/500x500" class="img-responsive"/>
                <div class="fa fa-plus project-overlay"></div>
            </div>
            <div style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>

</div>

I mój CSS:

.project-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    padding: 50%;
}

Z góry dziękuję!