Flex-box css help

[hargi]

Looking for some help I have borrowed some code that takes an image and scales it nicely and puts it in a circle. I am using flex container to put them nicely on the page. However I would like to add a caption under each photo. I am struggling to do this.
code pen http://codepen.io/anon/pen/MajpVv

<div class="flexcontainer">
<div class="thumbnail">
  <img class="portrait circle-img" src="http://www.fillmurray.com/150/150" alt="" /> <figcaption class="photocap"> Text under picture.</figcaption></div>
<div class="thumbnail"><img class="portrait circle-img" src="http://www.fillmurray.com/200/300" alt="" /></div>
<div class="thumbnail"><img class="portrait circle-img" src="http://www.fillmurray.com/300/300" alt="" /></div>
 
</div>

.flexcontainer{
  display: flex;
  justify-content: space-around;
  padding-bottom: 5px;
}
.figcaption{
  display:flex;
  flex-direction:row
}
.thumbnail {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #106fb8;


}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}
.circle-img {
  border-radius: 50%;
}

 

[hargi]

Cheers AHarvey
I tried targeting it with figcaption and also the class photocap to but no luck.
It seams to be stuck behind the photo.

All I am trying to do is make a employer section on the site with their photo and there name underneath that responsive ( it doesn't even have to be circular if that's a big problem)

 

[hargi]

Thank you. That looks to work

 

[hargi]

Kaku ,
This is the first time I have used it and I may be using it wrong. The height and width are set on the image container as I have loads of photos that I wanted to centre and trim with Css rather then manually in Photoshop.
The flex was just to lay them out on the page