Я пытаюсь создать отзывчивую сетку изображений (с описаниями), которые, когда мышь, будут иметь наложение цвета (просто изображение, а не текст). Из-за чувствительной высоты изображений у меня возникает проблема, когда наложение покрывает все, а не только изображение.
Как я могу это исправить?
Я воссоздал проблему здесь для более легкого понимания: 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%;
}
Спасибо заранее!
Добавьте класс в содержащий div, затем установите для него следующий css:
.img-overlay {
position: relative;
max-width: 500px; //whatever your max-width should be
}
position: relative требуется для родительского элемента дочерних элементов с position: absolute для размещения дочерних элементов относительно этого родителя.
Когда вы указываете позицию: 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;
}
Если я понимаю ваш вопрос, вы хотите иметь наложение только над изображением и не покрывать все?
Я бы установил родительский DIV (i, переименованный в контент в jsfiddle) в относительный, поскольку наложение должно быть расположено относительно этого div, а не окна.
.content
{
position: relative;
}
Я немного подружился и обновил вашу скрипку, чтобы просто наложить размер на img, который (я думаю) - это то, что вы хотите, дайте мне знать в любом случае:) http://jsfiddle.net/b9Vyw/
У меня было немного проблем с тем, чтобы это работало. Используя ответ brouxhaha, я получил 90% от того, что искал. Но корректировка отступов не позволила бы мне помещать текст куда угодно. Использование верхних и левых казалось лучше для моих целей.
.project-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #fff;
top: 80%;
left: 20%;
}