Создать поле с текстом поверх изображения в сетке

Question

Я пытаюсь создать вид сетки из 12 изображений в 3 столбцах с наложением текстового поля внизу каждого. Моя сетка работала отлично, пока я не попытался поместить текстовое поле сверху. У меня есть ощущение, что поле с текстом должно быть дочерним элементом изображения, но я не уверен, как это сделать.

В настоящее время я только применил классы к первому изображению, пытаясь заставить его работать, прежде чем перейти к другим. У меня также возникла проблема с попыткой выравнивания текста по центру поля. Если бы кто-нибудь мог помочь мне с любым из этих двух вопросов, это было бы очень ценно!

Это мой css:

section{
width: 940px;   
min-height: 400px;
margin: 0 auto;
padding: 10px 0 0 0;    
}

.grid-large {
margin: 16px 0 0 16px;
float: left;
}

.transbox {
height: 50px;
width: 300px;
margin-top: -50px;
background-color:#362e26;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}

.category-label{
color: #fff;
margin: 0;
margin-left: 15px;
margin-top: 5px;
vertical-align: middle;
}

.first {
margin-left: 0;
}

и мой HTML:

<section>
<img src="./images/gowns.jpg" width ="300" height="300" class="grid-large.first">
<div class="transbox">
<p class="category-label">wedding gowns</p> 
</div>
<img src="./images/bridesmaid.jpg" width ="300" height="300" class="grid-large">
<img src="./images/menswear.jpg" width ="300" height="300" class="grid-large">

<img src="./images/venues.jpg" width ="300" height="300" class="grid-large.first">
<img src="./images/planners.jpg" width ="300" height="300" class="grid-large">
<img src="./images/photographers.jpg" width ="300" height="300" class="grid-large">
</section>

Answer 1

Я бы сделал изображение фоновым изображением элемента div, который должен содержать текстовую метку, вместо того, чтобы пытаться поместить элемент div поверх изображения. Внутри div, который имеет фоновое изображение, вы можете добавлять новые div с текстом и размещать их в любом месте на изображении.

Что-то вроде этого:

<div id="picturegrid">
    <div id="gowns">
        <p>Wedding gowns<p>
    </div>
</div>

А также

#gowns { 
background: center transparent url(./images/gowns.jpg) no-repeat; 
}

Эта ссылка также может помочь вам: http://web.enavu.com/tutorials/making-image-overlay-caption-using-css/

Answer 2

Вот JSFiddle, который, я думаю, отвечает вашим требованиям: http://jsfiddle.net/ZPcHc/

HTML:

<section>
<div class="row">
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
</div>
<div class="row">
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
</div>
<div class="row">
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
</div>
<div class="row">
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
    <div class="imgbox"><div class="img"><div class="text">text</div></div></div>
</div>
</section

CSS:

section{
width: 940px;   
min-height: 400px;
margin: 0 auto;
padding: 10px 0 0 0;    
}

.imgbox{
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 30px;
}

.img{
    height: 50px;
    width: 50px;
    background-color: red;
}

.text{
    position: relative;
    bottom: -50px; /*height of your image*/
    left: 12px;
}

Возможно, вы захотите взглянуть на готовый CSS с уже реализованными сетками, такими как http://getbootstrap.com/ или foundation

Как только вы изучите их суть, вы сможете разрабатывать сайты намного быстрее! Удачи