Expanding Circles

by Glynne Turner

HTML

<div class="c_hold">
    <div class="circle_hold2">
    <div class="circle">1
    </div>
    </div>
</div>
<div class="c_hold">
    <div class="circle_hold2">
    <div class="circle">2
    </div>
    </div>
</div>

CSS

.c_hold{
  height:60px; 
  width:60px;  
  display:table;
  float:left;
  }
.circle_hold2{display:table-cell;
	vertical-align: middle;
	margin:auto;  }
.circle{font-size:18px;height:50px;width:50px;line-height:50px; text-align:center; background-color:green; border-radius:50%;-webkit-transition: width .2s, height .2s; /* Safari */
    transition: width .2s, height .2s,font-size .2s, color .2s; 
     margin:auto
    }
.circle:hover{font-size:24px;line-height:58px;background-color:#ffffff;height:58px; width:58px; border:1px solid green;}