Personalizar Parceiros (Avançado)

Depois de Personalizar Parceiros que o pessoal me disse que gostou agora vem uma técnica mais legal.

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.