Efeito do Gadget Autoras II

 

Yoo!

Mais um tutorial para vocês. Esse aqui é o mesmo efeito que usei no meu gadget atual de autoras. Ao passar o mouse a imagem aumenta, o círculo gira e o título desce.

Acho ele super fofo, mas se forem usar tentem não deixar igualzinho ao meu, sempre que posto tutoriais vocês se empolgam e deixam tudo igual.

Espero que gostem ~ 

1. Procure por ]]></b:skin> e antes da tag, cole:

.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);

}

 O código é muito extenso, por isso não vou poder explicar o código, mas você vai descobrir quando for testando.

2. Para usar, crie um gadget de HTML/JavaScript e nele cole:

<div class="imgholder">

   <div class="outer1 circle"></div>

   <figure>

      <img src="IMAGEM" />

      <figcaption class="caption">ESCRITA</figcaption>

   </figure>

</div>

Prontinho! Dúvidas? Comente.