Tutorial Efeito para Autores

Yoooo!
Vamos dar continuidade a maratona de tutoriais com um tuto do Kawaii World, certo?
Bem, vamos começar. Live Prewiew

1ºPasso
Vá em editar HTML e procure por ]]></b:skin> e acima desse código cole:

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


As partes mais importantes para mudarem está em negrito.

2ºPasso:
Vá no Layout e adicione um HTML/JavaScript e adicione este código:
<div class="view">
<img src="URL DA FOTO" />
<div class="mask">
<h4>NOME</h4>
<a href="LINK" class="info">Visite!</a>
</div></div>

Salve e está prontinho o seu efeito de autores

Espero que gostem.

Kissus!