Descrição hover

Oi, gente! Ontem consegui fazer outro efeito legal para gadget de moderadores! Apesar do código ter ficado um pouco maior do que o do outro efeito que já fiz aqui no blog, esse efeito é bem mais simples, apenas aparece uma descrição quando se passa o mouse. Espero que gostem.

Clique aqui para visualizar o efeito

Para esse efeito, você vai precisar escolher uma foto e a dividir em dois ou mais pedaços do mesmo tamanho, de acordo com a quantidade de moderadores que tiver em seu blog.

Então, atenção: a altura da imagem que você vai escrever no código não é a altura TOTAL que forma a foto! É a altura dos pedaços em que você dividiu.

Dessa forma, você pode ir adicionando mais "pedaços" se quiser, pois não é necessário contabilizar a altura TOTAL no código em nenhum momento! Assim, fica mais fácil de aplicar o efeito no seu blog!

Exemplo, para ficar beeeeem claro: Você tem uma foto de 300px de altura e quer dividir em 3 pedaços, você deve colocar no código então que a altura é 100px ("height: 100px;").

Agora chega de enrolação e vamos para o HTML do seu blog logo, né? Cole acima de ]]></b:skin> o seguinte código:

.sweet {
margin-left: 10px; /* Afasta as imagens 10px da esquerda */
width: 260px; /* Largura da imagem */
height: 70px; /* Altura da imagem*/
text-align: center; /* Alinhamento do texto */
opacity: 0.7;
-webkit-transition-duration: 1s;
}
.sweet:hover {
opacity: 1;
}
.sweet .sugar {
width: 260px; /* Largura da imagem, de novo */
height: 70px; /* Altura da imagem, de novo */
opacity: 0;
margin-top: -70px; /* Coloque a altura da imagem, aumente se precisar */
-webkit-transition-duration: 1s;
}
.sweet .sugar:hover {
opacity: 1.0;
}
.sweet candy {
font-family: Georgia; /* Fonte do nome */
letter-spacing: 2px; /* Distância entre as letras do nome */
font-size: 20px; /* Tamanho da fonte do nome */
color: #ffffff; /* Cor da fonte do nome */
font-style: italic; /* Troque para "normal" caso não queira em itálico */
}
.sweet a {
color: #ffffff; /* Cor dos links */
}
.sweet cake {
font-family: Calibri; /* Fonte da descrição */
font-size: 13px; /* Tamanho da fonte da descrição */
color: #ffffff; /* Cor da fonte da descrição */
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); /* Sombra da descrição */
}

Salve, e agora cole num gadget HTML/JavaScript esse outro código:

<div class="sweet"><img src="URL_DA_IMAGEM"/><div class="sugar"><candy><a href="LINK">Nome</a></candy><br /><cake>Sua descrição aqui</cake></div></div>

Esse é o código para 1 pedaço da foto. Vá repetindo de acordo com a quantidade de moderadores que você tiver.

É isso, qualquer dúvida é só comentar aqui, e se for usar, credite por favor. Bjs!