Preciso colocar o nome da imagem sobre ela quando o mouse passar. O mesmo efeito que temos usando o :hover quando o mouse passa por cima. Quero fazer o nome da imagem aparecer, colocar negrito, tamanho da fonte, etc.
2 Respostas
Exemplo básico com algumas poucas alterações retirado do site W3 Schools
Na classe .text
você tem a opção de mudar a cor,fonte,tamanho e aplicar todo e qualquer estilo que você achar necessário.
.text {
color: #008CBA; // Muda a cor do texto
font-size: 30px; // Muda o tamanho da fonte
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Esse é apenas um dos estilos criados pela equipe W3. Existem alguns outros efeitos hover que você pode encontrar aqui.
Podemos encontrar não só esse como muitos outros efeitos 'comuns' na sessão HOW TO do W3.
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #f2f2f2;
}
.container:hover .overlay {
opacity: 0.8;
}
.text {
color: #008CBA;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<body>
<div class="container">
<img src="http://illustratd.com/uploads/GNyhX565Mo__450x450.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Sorriso.jpg</div>
</div>
</div>
</body>
Se a formatação com negrito não for tão importante, você pode adicionar os atributos alt
e title
à imagem. I.e.:
<img src="imagem.png" title="Ó o gás!" alt="Pessoas dançando para uma meme.">
O atributo title
faz com que a imagem use o tooltip próprio do navegador, enquanto o atributo alt
é utilizado quando a imagem não pode ser renderizada (por erro na hora de carregar ou quando a página é carregada em navegador não-gráfico).
Além de exigir pouco código, ser cross-browser por padrão e não interferir na folha de estilo, essa forma garante que sua página fica mais acessível a pessoas com deficiência visual. Os navegadores podem ler em voz alta o texto do atributo alt
quando a pessoa selecionar a imagem, por exemplo.
Agora, se você precisa mesmo enfeitar o texto, a resposta do Bsalvo tem a solução mais apropriada.
-
Acho que você queria dizer o atributo:
title
, não? Oalt
não cria o efeito desejado. Commented 21/07/2017 às 12:23 -
1@LeonFreire tem razão. Obrigado, vou ajustar a resposta :) Commented 21/07/2017 às 12:48