CSS trouble with Figure & Figcaption

I am trying to display images on my site side by side, when you hover over them a gradient appears as well as some text describing the name of the project. I have been attempting this by using figures and figcaptions but have made a lot of progress but I can't get a few things figured out.

1) How to make the caption only display over the image (right now it displays over the image but there is an empty space where the text would be without the CSS)

2) How to align the images side by side, right now they are not displaying evenly.

3) How to make the caption text appear only on hover

My site is here, figures are at the bottom of the page: http://example4.inivex.com

Here is my 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;
}

And here is my HTML on the page:

<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>

Solution

Here you go...

Codepen Demo

HTML

As your post except I added a wrapper div and took out the break tags

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;
}