Efecto Afiliados Elite 2 Crooble

Yay!! Entrada Nº300 *.*!!

Otro efecto de afiliados elite, es super lindo & moderno *----*!! lo amarán. Preview...

Yukii

Si te gusta & lo quieres sigue los siguientes pasOtes... O.o 

Plantillas blogger: Pega el siguiente código justo arriba de ]]></b:skin>


Plantillas clásicas/blogskins: Pega el siguiente código justo arriba de </style>

.imgholder{
position:relative;
width: 50px;/* largo */
height:50px;/* alto */
float:left;
margin:60px 20px;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
/* thumbnails style */
.imgholder figure{
position:absolute;
left:0;
top:0;
width:50px;/* largo */
height:50px;/* alto */
margin:0;
overflow:hidden;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder img{
position:absolute;
left:0;
top:0px;
width:50px;/* largo */
height:50px;/* alto */
z-index:5;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
transition:
opacity 1s ease-in,
transform 1.5s;
-moz-transition:
opacity 1s ease-in,
-moz-transform 1.5s;
-webkit-transition:
opacity 1s ease-in,
-webkit-transform 1.5s;
}
.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: -15px;
top:30%;
width:80px;
opacity:1;
filter: alpha(opacity = 100);
color:#fff;/* Color del texto */
font: normal 11px 'Yanone Kaffeesatz';
text-align: center;
text-trasnform: uppercase;
text-shadow:#767676 1px 1px 5px;/* Sombra del texto */
z-index: 10;
transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transition:
opacity 1s,
transform 1s ease;
-moz-transition:
opacity 1s,
-moz-transform 1s ease;
-webkit-transition:
opacity 1s,
-webkit-transform 1s ease;
}
.imgholder:hover figcaption{
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.5,1.5);
-ms-transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
font: normal 10px 'Yanone Kaffeesatz'; /* Tamaño y nombre del texto cuando pasas el mouse encima */
text-trasnform: uppercase;
color: #fff;/* Color del texto cuando pasas el mouse encima */
left: 5px;
top:15%;
width:130px;
}
/* decoration style */
.imgholder .circle{
position:absolute;
border-radius:100px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
}
.imgholder .outer1{
top:-5px;
left:-5px;
width:50px;/* largo */
height:50px;/* alto */
z-index:2;
border:6px solid;/* Tamaño del borde */
border-color:#FE2E9A;/* Color del borde */
box-shadow:0 0 3px #FE2E9A;/* Sombra del borde */
-moz-box-shadow:0 0 3px #FE2E9A;/* Sombra del borde */
-webkit-box-shadow:0 0 3px #FE2E9A;/* Sombra del borde */
background: #F781BE;/* Color de la bolita del centro */
background: -moz-radial-gradient(center, ellipse cover, #F781BE 0%, #F781BE 100%);/* Sombra interna de la bolita */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#F781BE), color-stop(100%,#F781BE));/* Sombra interna de la bolita */
background: -webkit-radial-gradient(center, ellipse cover, #F781BE 0%,#F5A9D0 100%);/* Sobra interna de la bolita */
background: -o-radial-gradient(center, ellipse cover, #E2F1F2 0%,#79D1D7 100%);
background: -ms-radial-gradient(center, ellipse cover, #E2F1F2 0%,#79D1D7 100%);/* Sombra interna de la bolita */
background: radial-gradient(center, ellipse cover, #E2F1F2 0%,#79D1D7 100%);/* Sombra interna de la bolita */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E2F1F2', endColorstr='#79D1D7',GradientType=1 );
transition:
box-shadow 1s ease-out,
border-color 1.5s;
-moz-transition:
-moz-box-shadow 1s ease-out,
border-color 1.5s;
-webkit-transition:
-webkit-box-shadow 1s ease-out,
border-color 1.5s;
}
.imgholder:hover .outer1{
border-color:#F781D8;/* Color del primer borde cuando pasas el mouse encima */
box-shadow:0 0 10px #F781D8;/* Sombra del primer borde cuando pasas el mouse encima */
-moz-box-shadow:0 0 10px #F781D8;/* Sombra del primer borde cuando pasas el mouse encima */
-webkit-box-shadow:0 0 10px #F781D8;/* Sombra del primer borde cuando pasas el mouse encima */
}
.imgholder .outer2{
top:-12px;
left:-12px;
width:64px;
height:64px;
z-index:1;
border:6px solid;/* Tamaño del segundo borde */
border-color: #EE009F;/* Color del segundo borde */
box-shadow:0 0 20px #FF3CBE;/* Sombra del segundo borde */
-moz-box-shadow:0 0 20px #FF3CBE;/* Sombra del segundo borde */
-webkit-box-shadow:0 0 20px #FF3CBE;/* Sombra del segundo borde */
opacity:0;
filter: alpha(opacity = 0);
transform: scale(1.3,1.3);
-ms-transform: scale(1.3,1.3);
-moz-transform: scale(1.3,1.3);
-webkit-transform: scale(1.3,1.3);
transition:
opacity 1s ease 0.3s,
transform 1s ease-out 0.3s;
-moz-transition:
opacity 1s ease 0.3s,
-moz-transform 1s ease-out 0.3s;
-webkit-transition:
opacity 1s ease 0.3s,
-webkit-transform 1s ease-out 0.3s;
}
.imgholder:hover .outer2{
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);
}

Es muchísimo código!! O.o

Todo lo que hay que editar lo marqué entre /* &amp; */

Terminas de editar O_O &amp; guardas los cambios. 
Para aplicar el efecto a tus afiliados, usa el siguiente código...

<div class="imgholder"><div class="outer1 circle"></div><div class="outer2 circle"></div>   <figure>      <img src="URLDEIMAGEN" /><figcaption class="caption">NOMBREDELBLOG</figcaption></figure></div>

Para agregar a mas afiliados elite, agrega más del código anterior ^^ 
Terminas de editar, guardas &amp; listo!!! :D