Image Spin

*essa postagem é programada

Olá Anjos!

Feliz ano novo!!! 

Hoje trago outro tutorial do Tumblr Single Themes! É o efeito Image Spin. Esse efeito é bem legal e pode ser usado em menus, elite de afiliados, enfim, no que vocês quiserem. Quando você passa o mouse em uma imagem, ela roda e aumenta o tamanho. Só para lembrar, é sempre bom usar imagens com boa qualidade, para não correr risco de ficar embaçado quando ela aumentar o tamanho, consequentemente deixando feio o efeito. 

Veja um preview aqui. 

1-Vá no HTML do seu blog e procure por ]]></b:skin>. Acima, cole

.imagespinw {

     width: 150px;

     height: 150px;

     margin-left:0px;  

     margin-right:0px;

     margin-bottom: 2px; 

     background: transparent; 

     padding: 0px;

     margin-right: 0px;

     -webkit-transition:-webkit-transform 0.2s ease-in;

     -o-transition:-o-transform 0.2s ease-in;

     -moz-transition: width 2s;

     cursor: help;}

.imagespinw:hover {

     -moz-transition: width 2s;

     -webkit-transform: rotate(-360deg) scale(1.5) ;

     -moz-transform: rotate(-360deg) scale(1.5) ;

     -o-transform: rotate(-360deg) scale(1.5)}

Mude o que está em negrito pelo tamanho da sua imagem.

2-Use  código a seguir para aplicar o efeito:

<div class="imagespinw"><a href="LINK AQUI"><img src="LINK DA IMAGEM"/>
</a></div>

Caso não queira link, use:

 <img src="LINK DA IMAGEM" class="imagespinw">

Beijos e feliz ano novo!!! 

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar