Efeito Autoras Rotation

Olá gente trouxe um efeito muito legal que achei nesse tumblr.

-Visualização aqui.

Pois bem, acho melhor postar logo pois vou ter que lavar louça depois, então vamos aprender?

PS.: Os códigos são do tumblr, fiz minhas modificações.

Cole acima de ]]></b:skin>

#circle {position:fixed !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);}

Depois, cole isso em um Html/Javascript:

<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="http://static.tumblr.com/o286adx/eINmeve6a/exemplo1.png"></div>
</div>

Espero que tenham gostado :)