Menu em imagem para Autores/ Afiliados [001]

Outro tutu do dia haha. Esse e um efeito para gadget de postadoras acho ele muitooo lindo e pretendo usar aqui no blog. O efeito dele é assim, ao passar o mouse a imagem do postador da zoom, o círculo gira e o título "nome" desce. Esse tutu eu peuei do blog KawaiiWorld -www.kawaii-world.net- então os creditos vão todos para o KW.  Gosto? Bom vamos lá então!

Brevia do efeito

1. Em seu HMTL procure por ]]></b:skin> e antes da tag, cole o codigo a baixo:

Códigos

.imgholder{
    position:relative;
width:100px;
height:100px;
border-radius:100px;
float:left;
margin-top:5px;
    margin-left:25px;
    margin-bottom:15px;
}
/* thumbnails style */
.imgholder img{
position:absolute;
left:0;
top:0;
width:70px;
height:70px;
z-index:5;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0.3;
filter: alpha(opacity = 30);
box-shadow:0 0 5px #000;
-moz-box-shadow:0 0 5px #000;
-webkit-box-shadow:0 0 5px #000;
transform: scale(0.7,0.7);
-ms-transform: scale(0.7,0.7);
-moz-transform: scale(0.7,0.7);
-webkit-transform: scale(0.7,0.7);
transition:
opacity 1s,
transform 1s ease-in-out 0.3s;
-moz-transition:
opacity 1s,
-moz-transform 1s ease-in-out 0.3s;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease-in-out 0.3s;
}
.imgholder:hover img{
opacity:1;
filter: alpha(opacity = 100);
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
}
.imgholder figcaption{
position:absolute;
left:-5px;
top:25%;
width:80px;
color:#262626;
font-weight:bold;
text-shadow:-1px -1px 0 #fff;
z-index:4;
    font: normal 15px 'Yanone Kaffeesatz'; text-trasnform: uppercase;
transition:
top 0.5s ease-out;
-moz-transition:
top 0.5s ease-out;
-webkit-transition:
top 0.5s ease-out;
}
.imgholder:hover figcaption{
top:90%;
}
/* decorations style */
.imgholder .circle{
position:absolute;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder .outer1{
top:-8px;
left:-8px;
width:70px;
height:70px;
z-index:2;
border:8px solid;
border-color:#262626;
background: #ffffff;
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
transform:rotate(90deg);
-ms-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transition:
transform 1.8s ease-in-out,
box-shadow 1s ease-out,
border-color 1.5s;
-moz-transition:
-moz-transform 1.8s ease-in-out,
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-transform 1.8s ease-in-out,
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}
.imgholder:hover .outer1{
border-color:#d4d6fa #dfe5ff #d4d6fa #dfe5ff ;
transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
}

2. Agora crie um gadget HTML/JavaScript e dentro cole:

Códigos

<div class="imgholder">
   <div class="outer1 circle"></div>
   <figure>
      <img src="IMAGEM" />
      <figcaption class="caption">ESCRITA</figcaption>
   </figure>
</div>