22/12/2012

Efeito Zooming


Hayooo desta vez trago um tutorial, que tem muita gente usando!!! O efeito Zooming, feito pela Kαorii-chαn do blog/site Kawaii World, então ai esta os devidos créditos rsrsr. Esse estilo de menu com imagem é ótimo para postadores, ou categorias. Caso queira ver o efeito, basta clicar no link mais abaixo.



1. Para adicionar este efeito, vá em seu HTML e procure por ]]></b:skin>. Assim que o achar, adicione o código abaixo acima dele e Salve! 
,
Códigos
#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 ;
}

2. Agora vá em Layout abra um novo gadget java script e dentro dele cole:
Códigos
<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>

Basta colocar o link da imagem, o nome e texto como se pede.

6 comentários:

  1. Muito lindo esse efeito, amei *-* dá um toque especial ao blog!
    É a primeira vez que passo por aqui e estou seguindo, adorei! Se gostar, segue de volta? camilaejustin.blogspot.com Obrigada pela atenção, beijos >.<

    ResponderExcluir
    Respostas
    1. Yo Mila-san, verdade ele da um grande toque especial no blog.
      Fico contente que tenha gostado do blog, consertesa retribuo sim ^^

      Beijokas e obrigad apela visita!!!

      Excluir
  2. Hey aceitei a afiliação...Você já está lá no Blog ok ?
    kissus

    Portal Encantado

    ResponderExcluir
  3. Hayoo Nik aceito sim, ja esta na minha coluna de afiliados ^^

    Beijokas *^^*

    ResponderExcluir
  4. Adorei o efeito obrigada ^^
    Seguindo ...
    Segue?
    Little-worldoficial.blogspot.com.br/

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345