Efeito Picbox #1

Olá! Nesse tempo em que o blog ficou em hiatus, eu não deixei o HTML de lado. Eu comecei a fazer a prestar mais atenção nos códigos que eu já conhecia e aprendi um pouco mais. Aprendi a fazer Picboxes \o/

Pra quem não sabe, picboxes são aqueles efeitos em imagens que geralmente usamos para mostrar o nome e o link do blog dos autores e moderadores do blog. Ainda não entendeu? Aqui vai um exemplo. Meu exemplo está sem sal, eu sei. Usei cores bem "seguras", então ficou meio... méh. Acredito que se vocês colocarem um pouco mais de cor, vai ficar bem melhor.

Espero que gostem :3

DICA: Você pode usar o HTMLedit para editar, pois é bem mais fácil visualizar. O que ficará acima de ]]>< tem que ser colocado entre < style > < / style > (sem espaço, é claro) e o que será colocado em um gadget deve se colocado entre < body > < / body > (sem espaço)

1 - Procure por ]]>< usando F3 e acima cole:

#box-isa {
width: 120px /* Coloque o tamanho da imagem */
height: 120px; /* Coloque o tamanho da imagem */
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}
.isa-box {
width: 120px /* Coloque o tamanho da imagem */
height: 120px /* Coloque o tamanho da imagem */
background: transparent;
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}
.nome-isa {
height: 120px; /* Coloque o tamanho da imagem */
width: 120px; /* Coloque o tamanho da imagem */
font: 13px trebuchet ms;
text-transform: uppercase;
background: transparent;
-webkit-transition: all 0.8s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}
.nome-isa b {
margin-right: -1px; /* Muda o título de posição */
color: #a7d7e9; /* Cor do negrito */
text-shadow: 1px 1px 1px #; /* sombra do negrito, se quiser */}
.nome-isa a {
background: transparent;
margin-right: -1px; /* Muda  link de posição */
color: #b3d6e9; /* Cor do link */
text-decoration: none;
font-size: 11px; /* Tamanho da fonte do link */
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;}
#box-isa .isa-box {
text-align: center;
width: 120px; /* Coloque o tamanho da imagem */
height: 120px; /* Coloque o tamanho da imagem */
margin-top: -125px; /* Coloque a altura da imagem + 5px se for colocar no blogger */
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
opacity: 0;
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;
}
#box-isa .isa-box:hover {
text-align: center;
width: 120px; /* Coloque o tamanho da imagem */
height: 120px; /* Coloque o tamanho da imagem */
margin-top: -125px;  /* Coloque a altura da imagem + 5px se for colocar no blogger */

opacity: 0.8;
background: #efefef; /* Cor sólida * /
-webkit-transform: scale(1);
-moz-transform: scale(1);
-webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease;-o-transition: all 0.s ease;
}

2 - Depois de mudar o que for necessário, vá em Layout > Adicionar Gadget > HTML/JavaScript

<div id="box-isa">
<img src="IMAGEM" style="-webkit-border-radius: BORDA-ARREDONDApx; -moz-border-radius: BORDA
-ARREDONDApx; -o-border-radius: BORDA
-ARREDONDApx; -ie-border-radius: BORDA
-ARREDONDApx;">
<div class="isa-box"><br><center><div class="nome-isa"><b>Isa Souza</b><br>
<a href="http://link">euamohtml</a></center></div>
</div></div>

Espero que tenham gostado. Se não der certo ou se tiver dúvidas, pergunte na minha ask.