Publicado em 12 de abr.

Legenda sobre a imagem CSS

#desenvolvimento-frontend #legenda imagem

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

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Giovani· 12 de abr.

É 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· 12 de abr.

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>