CSS3 circular div with hover expand

by geometron

HTML

<div class="item1"></div>
<div class="item2"></div>

CSS

html { background: #535353; }

.item1    {
background:#BF4040;
height: 25px;
left: 0px;
position: absolute;
top: 100px;
transition:             width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -moz-transition:    width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -ms-transition:     width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -o-transition:      width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -webkit-transition: width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
width:15px;
}

.item1:hover
{
/*border-radius:100px;*/
height:25px;
left: 0px;
top: 100px;
width:250px;
background-color: #FFF;
}

.item2    {
background:#3cc2a5;
height: 25px;
left: 0px;
position: absolute;
top: 130px;
transition:             width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -moz-transition:    width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -ms-transition:     width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -o-transition:      width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
    -webkit-transition: width 400ms, height 200ms, border-radius 200ms,left 200ms, top 200ms, background-color 400ms;
width:15px;
}

.item2:hover
{
/*border-radius:100px;*/
height:25px;
left: 0px;
top: 130px;
width:250px;
background-color: #FFF;
}