Legendar imagens com CSS é uma prática simples e eficente para adicionar informações contextuais e melhorar a acessibilidade de um site. Neste post, exploraremos algumas maneiras de posicionar imagens com legenda em CSS usando tanto técnicas de alinhamento básico quanto estilos avançados de sobreposição e transparência. Veremos como criar uma legenda centralizada, colocá-la sobre a imagem e adicionar efeitos para destacar o texto, proporcionando uma experiência visualmente atrativa e informativa para os visitantes do seu site.
Estrutura HTML para imagem com legenda
Primeiro, crie uma estrutura HTML simples:
<div class="image-container">
<img src="imagem.jpg" alt="Descrição da imagem">
<figcaption>Esta é uma legenda para a imagem</figcaption>
</div>Estilizando a Legenda com CSS
Para uma legenda centrada abaixo da imagem, adicione o seguinte CSS:
.image-container {
text-align: center;
max-width: 300px;
}
.image-container img {
width: 100%;
}
.image-container figcaption {
font-size: 14px;
color: #666;
margin-top: 5px;
}Posicionar a legenda sobre a imagem
Para posicionar a legenda sobre a imagem com um efeito de sobreposição, utilize position: absolute:
.image-container {
position: relative;
display: inline-block;
}
.image-container img {
width: 100%;
display: block;
}
.image-container figcaption {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
color: white;
width: 100%;
text-align: center;
padding: 10px;
font-size: 14px;
}Ajuste com Flexbox
Para centralizar a legenda dentro de uma área flexível:
.image-container {
display: flex;
flex-direction: column;
align-items: center;
}Outro exemplo prático
A tag para imagens no HTML/XHTML (<img>) não possui um atributo que permite acrescentar uma legenda. É possível utilizar o CSS para gerar esse efeito.
Código HTML/XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<html xmlns="estilo.css" rel="stylesheet" type="text/css" />
<title>CSS - Dicas</title>
</head>
<body>
<div>
<p>
<img src="imagem.jpg" width="300" height="290" alt="Lagoa do taquaral" />
<p>
<div>
</body>
</html>Código CSS (arquivo estilo.css):
div
{
margin: 4px;
padding: 2px;
width: 310;
float: right;
}
div p
{
font-size: 10pt;
text-align: center;
text-style: italic;
}
h1
{
font-size: 15pt;
color: #000000;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
margin-bottom: 1px;
}Com essas técnicas, você consegue personalizar e adicionar legendas às imagens, aumentando a usabilidade e o apelo visual. Teste essas opções para criar a melhor experiência para seus usuários!
Aprenda através de projetos reais e aulas práticas. São 20 cursos completos + cursos bônus. Grupos privados exclusivos, atualizações constantes e lives semanais.
Python, PHP, Java Script, CSS, Node, Angular JS, MySQL, Photoshop, Flutter, AWS, Apache e muito mais!
CLIQUE NA IMAGEM ABAIXO E CONFIRA MAIS DETALHES:
Dúvidas ou sugestões sobre imagens com legenda em CSS? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits
Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?
Artigos Relacionados
Sobre o Autor
Bacharel em Sistemas de Informação pelo Instituto Paulista de Pesquisa e Ensino IPEP. Apaixonado por tecnologias e games do tempo da vovó!
0 Comentários