Efeito Shake Hover

Oi Oi Gente!

Acho que já virou rotina começar o post pedindo desculpas por não postar mais cedo e hoje não vai ser diferente e os motivos sempre serão os mesmos aqueles escolares! E eu percebi que faltam apenas 1 seguidor para cumprirmos com a nossa meta de 140 então se puderem nos ajudar ficaríamos gratas!

Hoje eu venho com um tutorial bem legal e que eu faria mais já estamos usando um efeito bem massa também, mas eu vou fazer porque eu curto bastante e garanto que você irão curtir também. ~Créditos ao We Heart HTML

 Primeiro, você precisa de uma imagem assim:

 A parte de cima que tem a foto é sem o hover [quando não passamos o mouse encima] e a parte com meu nome é a parte com hover [quanto passamos o mouse encima]. Você tem que cortar a imagem certo no meio, para que fique como aqui c: . Agora vá em Modelo > Design > Editar HTML > Ctrl + F e pesquise por ]]></b:skin> e acima cole:

@-webkit-keyframes efeitomod {

50% {-webkit-transform: rotate(-4deg);}

75% {-webkit-transform: rotate(3deg); }

100% {-webkit-transform: rotate(0deg); }

}

.mode {background: url(LINK DA IMAGEM); height: 100px; width:200px; display: inline-block;}

.mode:hover {-webkit-animation: efeitomod .5s alternate linear; background-position: bottom;}

Bem, você apenas vai mudar as partes em Negrito, itálico e sublinhado.

Negrito

É o link da imagem que você fez.

Sublinhado

É a altura da imagem que você fez. Mas preste atenção, você tem que por a metade da altura total da imagen. Ex.: Sua imagem tem a altura total de 200px, você vai só por a metade, que seria 100px. Entendeu? :3

Itálico

É a largura da imagem, você tem que colocar a altura total da imagem.

Entendido? isso são as únicas coisas que você vai mudar.

Agora, para usar, coloque isso aonde você quer que o efeito apareça:

<a class='mode' href='LINK'/>

Para colocar mais pessoas na equipe com este efeito, você tem que criar uma class para cada pessoa, Ex.:

Tem 3 pessoas em sua equipe, e você quer por cada uma delas com este efeito, você vai ter que repetir a class:

.mode {background: url(LINK DA IMAGEM); height: 100px; width: 200px; display: inline-block;}

.mode:hover {-webkit-animation: efeitomod .5s alternate linear; background-position: bottom;} 

mudando apenas a parte em Negrito, e nos links você apenas muda a parte em Itálico:

<a class='mode' href='LINK'/>