MT : Efeito para autores

Hi, trago mais um tutorial, desta vez é um efeito para autores, para verem cliquem e vão até ao gadget "Efeito autores". 

Se quiseres meter, vai ao html e cola este código gigante acima de ]]></b:skin>

.view {

cursor: pointer;

height: ALTURApx;

margin: 1px;

overflow: hidden;

position: relative;

text-align: center;

width: LARGURApx;

display: inline-block;

}

.view img { /* a imagem */

display: inline-block;

position: relative;

-moz-transition: all 0.6s ease-out;

-webkit-transition: all 0.6s ease-out;

-o-transition: all 0.6s ease-out;

transition: all 0.6s ease-out;

opacity: 1;

filter: alpha(opacity=100);

}

.view:hover img { /* se "anima quando passamos o mouse em cima */

-moz-transform: rotate(620deg) scale(0);

-webkit-transform: rotate(620deg) scale(0);

-o-transform: rotate(620deg) scale(0);

-ms-transform: rotate(620deg) scale(0);

transform: rotate(620deg) scale(0);

opacity: 0;

filter: alpha(opacity=0);

}

.view .mask {

background-color: #CORDOFUNDO;

height: ALTURApx;

left: 0;

position: absolute;

overflow: hidden;

top: 0;

width: LARGURApx;

-moz-transform: rotate(0deg) scale(1);

-webkit-transform: rotate(0deg) scale(1);

-o-transform: rotate(0deg) scale(1);

-ms-transform: rotate(0deg) scale(1);

transform: rotate(0deg) scale(1);

-moz-transition: all 0.4s ease-out;

-webkit-transition: all 0.4s ease-out;

-o-transition: all 0.4s ease-out;

transition: all 0.4s ease-out;

opacity: 0;

filter: alpha(opacity=0);

}

.view:hover .mask {

-moz-transform: translateY(0px) rotate(0deg);

-webkit-transform: translateY(0px) rotate(0deg);

-o-transform: translateY(0px) rotate(0deg);

-ms-transform: translateY(0px) rotate(0deg);

transform: translateY(0px) rotate(0deg);

-moz-transition-delay: 0.4s;

-webkit-transition-delay: 0.4s;

-o-transition-delay: 0.4s;

transition-delay: 0.4s;

opacity: 1;

filter: alpha(opacity=100);}

.view h4 {

background-color: #CORDAFAIXA;

opacity: 0.8;

color: #CORDOTÍTULO;

text-align: center;

position: relative;

font-family: handy;

text-transform: uppercase;

font-size: 8px;

margin: 9px 0 0 0;

padding: 5px 0;

-moz-transform: translateY(-200px);

-webkit-transform: translateY(-200px);

-o-transform: translateY(-200px);

-ms-transform: translateY(-200px);

transform: translateY(-200px);

-moz-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.view:hover h4 { /* título é mostrado */

-moz-transform: translateY(0px);

-webkit-transform: translateY(0px);

-o-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

-moz-transition-delay: 0.7s;

-webkit-transition-delay: 0.7s;

-o-transition-delay: 0.7s;

transition-delay: 0.7s;

}

.view p { /* o texto permanece oculto */

color: #fd0505;

font-family: pf arma five;

font-size: 8px;

margin: 0;

padding: 15px;

position: relative;

text-align: center;

-moz-transform: translateY(-200px);

-webkit-transform: translateY(-200px);

-o-transform: translateY(-200px);

-ms-transform: translateY(-200px);

transform: translateY(-200px);

-moz-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.view:hover p { /* texto é mostrado */

-moz-transform: translateY(0px);

-webkit-transform: translateY(0px);

-o-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

-moz-transition-delay: 0.6s;

-webkit-transition-delay: 0.6s;

-o-transition-delay: 0.6s;

transition-delay: 0.6s;

}

.view a.info { /* o link permanece oculto */

background-color: #CORDOBOTÃO;

border-radius: 5px;

box-shadow: 0 0 2px #e4e2e5, 0 0 5px #e4e2e5 inset;

color: #FFF;

display: inline-block;

padding: 2px 10px;

text-decoration: none;

margin-top: 8px;

font-family: handy;

font-size: 8px;

-moz-transform: translateY(-200px);

-webkit-transform: translateY(-200px);

-o-transform: translateY(-200px);

-ms-transform: translateY(-200px);

transform: translateY(-200px);

-moz-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

.view a.info:hover {

box-shadow: 0 0 5px #968ca3;

}

.view:hover a.info { /* link é mostrado */

-moz-transform: translateY(0px);

-webkit-transform: translateY(0px);

-o-transform: translateY(0px);

-ms-transform: translateY(0px);

transform: translateY(0px);

-moz-transition-delay: 0.5s;

-webkit-transition-delay: 0.5s;

-o-transition-delay: 0.5s;

transition-delay: 0.5s;

}

Para colocá-lo, vai ao esquema, adiciona um novo html/javascript e cola este código quantas vezes precisares:

<div class="view">

<img src="URL DA FOTO" />

<div class="mask">

<h4>NOME</h4>

<a href="LINK" class="info">VISITE!</a>

</div></div>

Créditos ao Kawaii World :)