Создайте коробку с текстом над изображением в сетке

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, который имеет сетки уже реализованы как twitter-bootstrap или foundation

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