Efeito bolha n/ imagem perfil

Boas tardes venho trazer uma outra forma de personalizar o gadget de perfil/ autor  do blog.
Assim olhando para a imagem acima não têm nada de mais ,mas tem borda diferente na côr e no border radius e letra /nome está com outra côr ,mas tem tambem efeito bolha ao passar o mouse em cima.
Pode visualizar online:  ENTRE AQUI
Para colocar este código entre em modelo e depois editar html e procure este código;

E agora coloque meu código acima do que está sublinhado a vermelho:

}
.profile-img {
border: 5px solid #cfaee7;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 5px 5px 0;
background: #cfaee7;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.profile-img:hover {
border-radius: 50%;
-moz-box-shadow: 0px 0px 13px #333232;
-webkit-box-shadow: 0px 0px 13px #333232;
box-shadow: 0px 0px 13px #333232;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}
.profile-data {
margin:0;
color:#ae8aec;
font-weight: bold;
line-height: 1.6em;
font: 25px  Bobber;
}
.profile-datablock {
margin:.5em 0 .5em;
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
color:#fff;
}
.profile-link{ font: 13px Bobber;color:#000; text-transform:none;letter-spacing:2px;line-height:1.2em;}

Nota: se vc ainda tiver o seu código de perfil/profile remova ele todo antes ou depois de colocar o meu código.
Simples mas com estilo eu acho até mais a todos...

Efeito bolha n/ imagem perfil

► 0

► dicas efeitos

► Cartita