How to put text on top of image when images arranged in list and heavily styled : Link to HTML + CSS:
https://jsfiddle.net/babis95/zdhne95u/

I have some HTML and CSS setup for a simple image gallery.
I've been trying to add white text on top of each of the images in the center. 

I researched different ways but none seem to work with they way i set up my code:
```
.section-images p
{
  color: white;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
This code seem to work on single image in a div, but not when multiple images are used.

