Efeito Back

Boa tarde, gente.

Estou muito feliz que meu blog consegui alcançar os 500 seguidores, só de falar digitar eu fico ansiosa. Tipo essa cobrinha dançando, é legal a sensação, sério. Vamos ir para Londres comemorar? Eu pago por vocês -sqn.

O efeito de hoje eu aprendi no We Heart HTML, então créditos a lá. No mesmo, ocorre a transição de "uma imagem para outra", quer dizer, parece, mas é tudo em uma só imagem. Para ver a preview do efeito, clique aqui e passe o mouse em qualquer uma das imagens.

Cole o código abaixo acima de ]]></b:skin>:

/*** efeito back por htmlstrew ***/ @-WEBKIT-KEYFRAMES PULSE {0% { -WEBKIT-TRANSFORM: SCALE(1); }50% { -WEBKIT-TRANSFORM: SCALE(1.1); }100% { -WEBKIT-TRANSFORM: SCALE(1); }} .moddib {background: url('urlimagem'); height: 100px; width: 133px; display: inline-block; -webkit-transition-duration: 0.5s; margin-left:10px;} .moddib:hover {background-position: right; -WEBKIT-ANIMATION: PULSE 1S;-MOZ-ANIMATION: PULSE 1S;-MS-ANIMATION: PULSE 1S; -webkit-transition-duration: 0.5s; }

No código,você só deve substituir o URL da imagem. Veja um exemplo com as medidas abaixo:

Agora,para adicionar mais autores,coloque repita o código e troque o '.moddib' por '.moddib2', e assim vai, entenderam? Mas só repita a partir da tag que eu coloquei no exemplo,mesmo...

Para o efeito aparecer, cole o código apresentado no blockquote em um gadget:

<a href="link"><div class="moddib"></div>