Наложение изображений на загрузочный диск с откликами

Я пытаюсь создать отзывчивую сетку изображений (с описаниями), которые, когда мышь, будут иметь наложение цвета (просто изображение, а не текст). Из-за чувствительной высоты изображений у меня возникает проблема, когда наложение покрывает все, а не только изображение.

Как я могу это исправить?

Я воссоздал проблему здесь для более легкого понимания: http://jsfiddle.net/r8rFc/

Вот мой 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>

И мой CSS:

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

Спасибо заранее!

Ответ 1

Добавьте класс в содержащий div, затем установите для него следующий css:

.img-overlay {
    position: relative;
    max-width: 500px; //whatever your max-width should be 
}

position: relative требуется для родительского элемента дочерних элементов с position: absolute для размещения дочерних элементов относительно этого родителя.

DEMO

Ответ 2

Когда вы указываете позицию: absolute, она позиционирует себя к следующему наивысшему элементу с положением: относительный. В этом случае, что .project div.

Если вы даете изображению немедленного родительского div стиль позиции: относительный, наложение будет использоваться для этого вместо div, который включает текст. Например: http://jsfiddle.net/7gYUU/1/

 <div class="parent">
    <img src="http://placehold.it/500x500" class="img-responsive"/>
    <div class="fa fa-plus project-overlay"></div>
 </div>

.parent {
   position: relative;
}

Ответ 3

Если я понимаю ваш вопрос, вы хотите иметь наложение только над изображением и не покрывать все?

Я бы установил родительский DIV (i, переименованный в контент в jsfiddle) в относительный, поскольку наложение должно быть расположено относительно этого div, а не окна.

.content
{
  position: relative;
}

Я немного подружился и обновил вашу скрипку, чтобы просто наложить размер на img, который (я думаю) - это то, что вы хотите, дайте мне знать в любом случае:) http://jsfiddle.net/b9Vyw/

Ответ 4

У меня было немного проблем с тем, чтобы это работало. Используя ответ brouxhaha, я получил 90% от того, что искал. Но корректировка отступов не позволила бы мне помещать текст куда угодно. Использование верхних и левых казалось лучше для моих целей.

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    top: 80%;
    left: 20%;
}

http://jsfiddle.net/1rz0b7d8/1/