[Resolvido] [CSS3] Quadrado crescendo somente para a direita

[Anderson Coutinho 7]

Então . . .

 

Comecei a ler sobre CSS3 e tentei reproduzir algumas coisas,

 

não estou conseguindo fazer com que a box cresca somente para a direita,

 

ou seja , está crecendo para os 2 lados!

 

help?

 

#box{
width:80px;
height:80px;
margin:auto;
background-color:#F03;
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;


}


#box:hover{

width:180px;


}

 

 

Aqui está o exemplo do site:

http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition4

[ebdt 0]

amigo, estava testando aki, e para a div aumentar apenas para um lado, a mesma tem que estar flotada, no seu exemplo, tira o margin: auto;, assim já vai funcionar, mas é bom uso usar o float;

[Anderson Coutinho 7]

 

O que foi feito:

 

-Cria uma nova div(caixa);

-Posta a div box dentro da div caixa;

-Alterações na div box.

 

Segue o código:

#box{
width:80px;
height:80px;
background-color:#F03;
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
float:left;
 } 

#box:hover{
 width:180px;
  } 

#caixa{
margin:auto;
width:180px;
height:80px; 
}

 

Obrigado ebdt!