Efeito - Image Rotation

Boa tarde galera ...

Bom , eu já estou aprontando o novo Layout aqui do Blog , as cores que eu escolhi estão cooperando para as ideias aparecerem , acho que eu vou coloca-lo só em fevereiro até por que eu perdi bastante tempo e paciência fazendo este do Ren , e como gostei bastante dele acho que seria um desperdício deixa-lo só um mês .Já fiz um banner para o novo layout só que ele é só base , então se tiverem sugestões para o tema do novo layout , podem dar . Estou aceitando sugestões .

Estava sem ideia do que postar *como sempre* , então procurei por um efeito legal para os moderadores do Blog (até por que é difícil achar um legal ) , ele é muito fofo , veja o efeito aqui  .Notaram que eu mudei o nosso laboratório ? Aquele tava muito pink e pobre , e como eu não gosto de rosa fiz algumas mudanças . Só foi para ficar mais agradável aos olhos .

Let's go ! ~

 #1 : Vá no seu HTML e procure ( F3 ou CTRL+F) por ]]></b:skin> .

#2 : Acima dele cole o seguinte code :

#circle {important; width:160px; background:white; height:160px; padding:5px; text-align:center; line-height:8px; z-index:999; border-radius:9999999px; border:1px solid #fcfafa; transition: all 0.7s ease-out; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}

#circle:hover{opacity:1; -moz-transform: rotate(-180deg);  -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg);}

#circlepic{opacity:.85; border-radius:9999999px; width:160px; transition: all 0.7s ease-out; -o-transition-transition: all 0.7s ease-out; -webkit-transition: all 0.7s ease-out; -moz-transition: all 0.7s ease-out;}

#circlepic img{width:160px; height:160px;border-radius:9999999px;}

#circle:hover #circlepic {opacity:0.1;}

#cinside {opacity:0; z-index:1; position:fixed; width:160px; height:100px;padding-top:60px;line-height:10px;}

#cinside ctitulo {font: 18px Pacifico; color: #A42423; text-align:center; display: block; padding: 5px; text-shadow: 0px 1px 1px #eae7e7; text-transform: Lowercase; background: #fff;}

#cinside cdesc {font: 10px Tahoma; color: #A42423; text-align:center; padding: 5px; text-shadow: 0px 1px 1px #f0f0f0; text-transform: Lowercase; display: block;}

#circle:hover #cinside {opacity:1;-moz-transform: rotate(180deg);-o-transform: rotate(180deg);-webkit-transform: rotate(180deg);} 

#3 : Visualize e se estiver tudo certo , salve .

#4 : Adicione um novo Gadget HTML/Javascript e nele cole :

<div id="circle">

<center><div id="cinside">

<ctitulo>Titulo</ctitulo>

<cdesc>descrição aqui e blá blá blá... isso é só um exemplo, rsrs.</cdesc>

</div>

<div id="circlepic"><img src="LINK_IMG"></div>

</div>

Bom é isso , bem simples , fácil e rápido . Vamos as explicações :

Os width e height: você deverá mudá-los de acordo com o width e height da sua foto; 

O padding-top: também deverá ser mudado de acordo com o tamanho da sua foto. Para que fique centralizado, divida o height da sua foto por 2. 

A fonte: A fonte Pacifico não está junto com o código, ou seja, você terá que mudar a fonte.