Legenda sobre a imagem CSS

Bom dia!

Estou utilizando o seguinte código em uma galeria de imagens:

#mainbrasil li {

 display:inline;
 float:left;
}

img.brasil {

	width:289px;
	height:289px;
	margin:12px;
	object-fit: cover;
 object-position: center;

}

<div id="mainbrasil">
 <ul>
 <span>Legenda sobre a imagem e na parte superior</span>
 <li><img src="img/'.$nomeimg.'/'.$nomeimg.'2.jpg" class="brasil" /></li>
 <span>Legenda sobre a imagem e na parte inferior</span>
 </ul>

 </div>

	Tudo está funcionando...Mas eu gostaria de inserir duas legendas SOBRE a imagem. Uma em seu topo outra na base line, todas com fundo transparente...Eu consegui fazer algo semelhante, mas substituindo as <LI> por <DIV> o código, porém, fica mais sujo.

	Alguém tem uma luz para me ajudar ?

	Obrigado

	Abraços