Ошибка CSS с рисунком и рисунком

Question

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

1) Как сделать подпись только отображаться поверх изображения (сейчас он показывает на изображении, но есть пустое пространство, где текст будет без CSS)

2) Как выровнять изображения бок о бок, прямо сейчас они не отображаются равномерно.

3) Как сделать текст заголовка появляется только при наведении курсора мыши

Мой сайт здесь, цифры находятся в нижней части страницы: http://example4.inivex.com

Вот мой CSS:

.test a { 
position: relative; 
display: inline-block; 
border: 1px solid; 
/*float:left;*/ 
width:300px; 
height:240px; 
margin:5px; 
} 

.test a:hover:before { 
content: ''; 
display: block; 
border: 0px solid; 
background: url(http://example4.inivex.com/wp-content/uploads/2014/02/og.png); 
width: 300px; 
height: 240px; 
position: absolute; 
top: 0; 
right: 0; 
} 

figure { 
float:left; 
width:300px; 
height:240px; 
margin:5px; 
} 

.test figcaption { 
position: relative; 
top: -30px; 
left: 15px; 
} 

А вот мой HTML на странице:

<h3 style= "text-align: center;">Our Work</h3> 
<br><br> 

<figure class="test"><a href="http://example4.inivex.com/m"><img   src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300"  height="240" /></a><figcaption>Test Caption</figcaption></figure><br> 

<figure class="test"><a href="http://example4.inivex.com/m"><img src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300" height="240" /></a><figcaption>Test Caption</figcaption></figure><br> 

<figure class="test"><a href="http://example4.inivex.com/m"><img src="http://example4.inivex.com/wp-content/uploads/2013/12/ptf1.jpg" width="300" height="240" /></a><figcaption>Test Caption</figcaption></figure><br> 

Answer 1

здесь вы идете ...

Codepen Demo

HTML

Как ваш пост, кроме я добавил обертку DIV и вынул тег перерыва

CSS

.wrapper { 
    text-align:center; 
} 

figure { 
    display: inline-block; 
    border:1px solid grey; 
    position: relative; 
    overflow:hidden; 
} 

figure a { 
    display: block; 
} 

figure:hover:before { 
    content: ''; 
    display: block; 
    background: url(http://example4.inivex.com/wp-content/uploads/2014/02/og.png); 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
} 

figcaption { 
    position: absolute; 
    height:50px; 
    line-height:50px; 
    background-color: grey; 
    bottom:-50px; 
    width:100%; 
    transition: bottom 0.5s ease; 
} 

figure:hover figcaption { 
    bottom:0; 
}