Efeito Circle

Gostaram do novo modelo feito por mim?

Booa tarde leitoras! Quanto tempo! Voltei de viagem ontem, mas já não tinha cabeça para postar algo, já que nem tudo havia dado certo.

Então, sobre o concurso irei esperar mais um pouquinho para inscrição de mais candidatas.

Sem mais enrolação, vim trazer para vocês um efeito bem bacana para ser usado aonde você quiser!

Ele é bem bonitinho, você passa o mouse á imagem gira e aparece uma descrição.

Preview

Vamos ver?

1º Cole isto em ]]><b:skin

/** EFEITO **/
.circle li {width: LARGURApx; height: ALTURApx; display: inline-block;}
.circle {padding: 0px; list-style: none; display: block; text-align: center; 

width: 100%;}
.efeito {width: 100%; height: 100%; border-radius: 50%; 

position: relative; cursor: default; box-shadow: 0 1px 

3px rgba(0,0,0,0.2);}
.imagem {width: 100%; height: 100%; border-radius: 50%; 

overflow: hidden; position: absolute; 

box-shadow: inset 0 0 0 10px rgba(255,255,255, 0.5); 

-webkit-transform-origin: 95% 40%; -moz-transform-origin: 95% 40%; 

transform-origin: 95% 40%; -webkit-transition: all 1s ease-in-out; 

-moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.efeito:hover .imagem {box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5),

 0 1px 3px rgba(0,0,0,0.2); 

-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); 

transform: rotate(-180deg);}

/** IMAGENS **/
.imagem-1 {background-image: url('IMAGEM'); z-index: 3;}
.imagem-2 {background-image: url('IMAGEM'); z-index: 2;}
.imagem-3 {background-image: url('IMAGEM'); z-index: 1;}

/** HOVER **/
.hover {position: absolute; width: 100%; height: 100%; border-radius: 50%; 

overflow: hidden; background: #61a0f2 url('http://static.tumblr.com/ubiuxyg/5G4m9bgwy/noise.png'); 

box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);}
.hover h3 {color: #fff; text-transform: uppercase; position: relative; 

letter-spacing: 1px; font-size: 12px; margin: 0 0px; padding: 30px 0 0 0; 

height: 40px; font-family: 'Open Sans', Arial, sans-serif; 

text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}
.hover p {color: #fff; padding: 0px 5px; margin: -20px 10px; font-size: 10px;

 border-top: 1px solid rgba(255,255,255,0.5);}

Mexa só onde está em negrito. O código é grande, mas muito fácil.

2º Cole isto num gadget de HTML/Javascript

<ul class="circle"> <li><div class="efeito"><div class="hover"> <h3>Seu nome</h3><p>urldoseutumblr</p></div> <div class="imagem imagem-1"></div></div></li> <li><div class="efeito"><div class="hover"> <h3>Seu nome</h3><p>urldoseutumblr</p></div> <div class="imagem imagem-2"></div></div></li> <li><div class="efeito"><div class="hover"> <h3>Seu nome</h3><p>urldoseutumblr</p></div> <div class="imagem imagem-3"></div></div></li> </ul>

E prontinho!!! Dúvidas postem aqui.

Se repassarem creditem.

Créditos: (www)

Beijos e até mais!