Notes

Antes de tudo faça um backup do seu Template, caso erre ao adcionar os códigos

Para Adcionar os códigos CSS procure pela tag:
]]></b:skin>


Adcione os códigos acima dela.

Nós vamos adcionar um css que faz o Banner levantar, para ficar desse jeito ao passar o mouse no banner:




Gostou né? então nosso código fica assim:
.parceiros img{
-webkit-box-shadow: 0px 0px 0px black;
-moz-box-shadow: 0px 0px 0px black;
-o-box-shadow: 0px 0px 0px black;
position: relative;
border: 0px solid black;
top: 0px;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.parceiros img:hover {
-webkit-box-shadow: 3px 3px 5px black;
-moz-box-shadow: 3px 3px 5px black;
-o-box-shadow: 3px 3px 5px black;
position: relative;
top: -5px;
border: 0px solid black;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}


Agora vamos dar uma opacidade para ficar mais legal, desse jeito:




Nosso código CSS agora fica assim:
.parceiros4 img{opacity: .3;
-webkit-box-shadow: 0px 0px 0px black;
-moz-box-shadow: 0px 0px 0px black;
-o-box-shadow: 0px 0px 0px black;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
position: relative;
border: 0px solid black;
top: 0px;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.parceiros4 img:hover{opacity:5.0;
-webkit-box-shadow: 3px 3px 5px black;
-moz-box-shadow: 3px 3px 5px black;
-o-box-shadow: 3px 3px 5px black;
filter:alpha(opacity=30);
-moz-opacity: 5.0;
-khtml-opacity: 5.0;
position: relative;
top: -5px;
border: 0px solid black;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
transition: all 0.15s linear;
}


Ok, fizemos um CSS que faz o banner levantar, e que tal um que dê um zoom no banner? Para ficar desse jeito:



Maneiro né? Então nosso código CSS para o efeito zoom fica assim:
img.parceiros{
width: 88px;
height: 31px;
border: 1px solid #000;
-webkit-transform:scale(1.0);
-moz-transform:scale(1.0);
-o-transform:scale(1.0);
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
opacity: 0.9;
}
img.parceiros:hover{
border:1px solid #000;
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 20px black;
-webkit-box-shadow:0px 0px 20px black;
-moz-box-shadow:0px 0px 20px black;
opacity: 1;
}



O Código HTML do Banner para o Efeito Levantar é esse:
<div class="parceiros"><a href="http://design.fanmytsu.net/"><img src="http://www.imgfans.com.br/NR/Jan12/25/banner.gif" /></a></div>


E para o Efeito Zoom:
<a href="http://design.fanmytsu.net/"><img src="http://www.imgfans.com.br/NR/Jan12/25/banner.gif" class="parceiros5" /></a>


Você pode personalizar os códigos ao seu jeito, mesclar efeitos e tudo mais.

Se gostou comente, sua opnião nos ajuda a manter o site.