Legenda animada com CSS3

Olá, galera. Nesse tutorial vou dar uma dica de legenda bem interessante. Ela aparece quando o mouse é posicionado em cima do Box com a figura, mas não é simplesmente aparecer. Graças ao CSS3, ela aparece deslizando debaixo da figura.

Por Programação Pular para comentários
Legenda animada com CSS3

Olá, galera. Nesse tutorial vou dar uma dica de legenda bem interessante. Ela aparece quando o mouse é posicionado em cima do Box com a figura, mas não é simplesmente aparecer. Graças ao CSS3, ela aparece deslizando debaixo da figura. Vamos por a mão na massa?

Veja o resultado:



HTML

Basquete



CSS


Entendendo o HTML


Este HTML é bem simples, uma div recebendo a class legenda, onde definimos atributos de largura, altura, line-height para o texto (legenda) e lógico, a animação que vai acontecer quando o mouse estiver em cima do box.


Entendendo o CSS


Vamos entender o css com calma. Na class legenda p, definimos alguns atributos para a tag < p >, que no HTML, é o texto da legenda. Foi definido um reset que é o margin-top, só pra tirar espaços extras que a tag < p > coloca e também um margin-left pra não grudar na borda cinza.
.legenda p {
    margin-top:0;
    margin-left:5px;
}


A class legenda tem atributos tanto para o Box com a borda cinza, que segura a imagem e o texto, quanto para o texto que será a legenda. Além disso, tem os atributos para definir a animação. Vamos linha por linha agora.

A borda cinza do Box.
border:5px solid #dddddd;

A cor de fundo laranja do Box.
background-color:#CC6600;

A largura do Box.
width:301px;

A altura do Box. Que engloba a imagem mais o espaço para legenda.
height:306px;

Até aqui nenhum mistério, Definimos o básico para o Box. Agora começa os atributos para a legenda. Vamos lá. Aqui definimos a altura da linha para o texto dentro do Box. Coloquei 25px, para o texto começar a descer logo abaixo da figura, quanto menor este valor, mais em cima da figura o texto fica.
line-height: 25px; 

Nesta linha, definimos para o texto ficar transparente. Por isso temos a impressão de que ele não está lá, mas está.
color: transparent;

Definimos o tamanho da fonte da legenda.
font-size: 40px;

Definimos as fontes utilizadas para o texto. Pra quem não entende isso, ele tenta achar a fonte Arial, se não encontrar ele procura a Helvética e se não encontrar ele tenta colocar uma fonte da família sans-serif.
font-family: Arial, Helvetica, sans-serif;

Nesta linha definimos que a fonte ficará em negrito.
font-weight: bold;

Aqui definimos que o texto será todo maiúsculo.
text-transform: uppercase;

E nas próximas 2 linhas, definimos os atributos da animação da legenda.
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;

Nessa animação, todos os atributos serão afetados (all), o tempo da animação é 0.5s, e usará o tipo de efeito ease (começa rápido e termina freando). Lembrando que as duas linhas definem o mesmo efeito, só que cada uma é interpretada por um navegador. Menos o IE.

Na próxima class, definimos quando a animação irá ocorrer e o que vai ser afetado.
Quando ocorrer o hover na class legenda, ou seja, quando for colocado o mouse em cima do Box que contém a class legenda, serão alterados os atributos citados com o efeito descrito na class anterior.
.legenda:hover{
    line-height: 75px;
    color: #FFFFFF;
}

Em resumo, será alterado o tamanho da linha (line-height) para um valor maior, por isso ele desliza para baixo e a cor passará de transparente (definido na class anterior) para branca, assim aparecendo.

Veja o resultado:


Bem pessoal, esse foi o tutorial dessa semana.Até mais.

Recomendamos ler:

Acompanhe as últimas notícias de tecnologia aqui no Oficina da Net. Sempre trazendo conteúdos novos e produtos interessantes.

Comentários:
Carregar comentários