Ex caixa c/ efeito p/3

Oi voltando com a continuação de caixa c/ efeito hover...
Como na imagem acima mostra usamos a mesma caixa ,mas efeito é outro...
Veja a demonstração online:ENTRE AQUI:
Agora abaixo fica código :

<style>
#excaixabt{
width:250px;
height:120px;
margin:auto;
border:3px solid #fff;
border-radius:10px  ;
-moz-border-radius:10px;
-webkit-border-radius:10px  ;
background:#fff url(http://img1.rnkr-static.com/list_img_v2/13715/1013715/C480/the-greatest-white-rappers-of-all-time-u2.jpg);
box-shadow:0px 0px 20px 0px #000;
-moz-box-shadow:0px 0px 20px 0px #000;
-webkit-box-shadow:0px 0px 20px 0px #000;
 transition-duration:2s;
-webkit-transition-duration:2s;
   
}
#excaixabt:hover{
 transform:scale(2,2);
-ms-transform:scale(2,2);
 -webkit-transform:scale(2,2);
}
</style>
<div id="excaixabt">
</div>

Nota,aqui abaixo explico cada detalhe deste gadget .

• width:250px largura caixa
• height:120px; altura caixa
• margin:auto; caixa centrada
• border:3px solid #fff; borda  expessura e côr
• border-radius:10px  moz webkit: angulo borda caixa  
• background:#fff url(); côr e imagem fundo caixa
• box-shadow:px #000 moz webkit; côr espessura de fora caixa
• transition transition hover; efeito na imagem caixa

E pronto espero que ajude alguma questão deixe recado ,terá continuação em outras postagens...

Ex caixa c/ efeito p/3

► 0

► box dicas efeitos vários

► Cartita