Legenda sobre a imagem CSS

[mldiogo87 2]

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

[Giovani 104]

É uma escolha sua, com o código correto funcionará independente do que for utilizado .... mas é bacana sua preocupação.

5 horas atrás, mldiogo87 disse:

Eu consegui fazer algo semelhante, mas substituindo as <LI> por <DIV> o código, porém, fica mais sujo.

 

Uma hipótese para resolver sua dúvida é trabalhar com position dentro do li, ficaria mais ou menos assim: ul > li ( legenda + imagem + legenda)

 

[Eziquiel 96]

Se bem entendi, cada <li> será uma imagem da sua galeria, correto? Então, se cada imagem recebe duas legendas, as legendas deverão ser implementas dentro do seu respectivo <li>; e cada <li> deverá conter duas legendas.

 

Se é isso mesmo, talvez isso ajude:

<style>
    #mainbrasil li {
      display:inline;
      float:left; 
      position: relative;
    }

    #mainbrasil li > span{
      position: absolute;
      left: 0;
      font-family: Arial;
      text-shadow: 0 0 6px #fff;
      z-index: 5;
      margin: 12px;
      width: 100%;
      padding: 5px;
      display: block;
      box-sizing: border-box;
    }

    #mainbrasil li > span.legSuperior{
      top: 0;
    }

    #mainbrasil li > span.legInferior{
      bottom: 0;
    }

    img.brasil {
      position: relative;
      display: block;
      width:289px;
      height:289px;
      margin:12px;
      object-fit: cover;
      object-position: center;
    }
</style>

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