테두리 width 500 height 500 짜리 A라는 네모가 있고

그안에 위치가 x200 y200 에 w100 h100 짜리 B라는 네모가있는데

 

A라는 네모에 마우스를 올리면 B라는 네모가 오른쪽으로 나가면서 사라져야 하는데

 

 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style>  
   .a1{width:500px;height:400px; background:red; padding-left:200px; padding-top:200px;float:left;
   overflow: hidden;
   transition:all 0.3s ease-in-out}
   .a1:hover{padding-left:600px;}
   .b1{width:100px;height:100px; background:green;}
  </style>
 </head>
 <body>
  <div class="a1">
   <div class="b1"></div>
  </div>
 </body>
</html>

 

라고 만들었는데 ㅠㅠ.... A네모가 같이 커져버리네요 한두개만 더 넣으면 될꺼같은데 어떻게 해야할까요?