Tutorial: Efeito Zooming

Obrigada pelos 78 seguidores <3

Amo muito vocês!

Oi meus candys, como vão ?

Nossa, que calor! Aonde vocês moram esta muito calor ?

Parece que pegaram o Rio de Janeiro e colocaram em um forno, poxa.. Mas enfim.

A pedido de uma leitora linda a Laurinha, eu vou ensinar a fazer um efeito para autores do Blog!

Vamos lá!

Quem vem comigo ?

Primeiro vou avisar duas coisas:

- Eu não testei no meu blog, porque estou com defeitos pequenos no meu Html

- Não tem preview, por isso só fazendo para ver, mas garanto que é bonito!

-------------------

Primeiro vá no seu Html -> Aperte Ctrl+F e pesquise por ]]></b:skin>

Achou ? Agora acima dessa Tag adicione o seguinte código:

#zooming {

width:110px;

height:110px;

display: inline-block;

position:relative;

}

#zooming img {

position:absolute;

width:110px;

height:110px;

-webkit-transition-duration: .80s;

}

#zooming:hover img{

-webkit-transform:scale(1.5);

-moz-transform:scale(1.5);

-o-transform:scale(1.5);

opacity:0.3;

-webkit-transition-duration: .70s;

}

.zoomingout {

float:center;

width:110px;

height:110px;

border: 2px solid #e4a2c7;

overflow:hidden;

-webkit-transition-duration: .59s;

}

.zoomingout:hover {

float:center;

width:110px;height:110px;

border: 2px solid #e377b4;

overflow:hidden;

-webkit-transition-duration: .59s;

}

#palavras a.header {

width:110px;

height:110px;

margin-left:-1px;

opacity:1;

margin-top:-0px;

padding:4px;

text-align: center;

color:#bb4487;

font-size: 10px;

padding: 5px 2px 10px 2px ;

}

#palavras {

width:110px;

height:110px;

margin-left:-1px;

opacity:1;

margin-top:-0px;

padding:4px;

text-align: center;

color:#434343;

font-size: 10px;

padding: 5px 2px 10px 2px ;

}

O código é bem grandão, mas se você ler com calma e atenção, você consegue editá-lo ao seu gosto!

Agora para o efeito aparecer, adicione um Gadget de Html/JavaScript e cole este código:

<div id="zooming" class="zoomingout"><img src="LINK DA SUA IMAGEM" class="image4" /> <div id="palavras"><a href="link" class="header">TEXTO EM ROXO OU OUTRA COR</a> <br /> TEXTO TEXTO TEXTO</div></div>

E pronto! Troque o que se pede e pronto. Gostaram ?

Créditos: www 

Beijos.