Edit in JSFiddle

div, p { 
    float: left;
    color: white;
    text-align: center;
}

div {
    width: 10em;
    height: 10em;
    line-height: 10em;
    border-radius: 10em;
    background: indianred;
    margin: 2em 0 0 2em;
    -webkit-transition: font-size 1s;
    -o-transition: font-size 1s;
    -moz-transition: font-size 1s;
}

div:hover {    
    font-size: 2em;    
}

p {
    width: 5em;
    height: 5em;
    border-radius: 5em; 
    line-height: 5em;
    background: blue;
}    

div i,
p i {
    font-size: 14px;
    display: block; 
    text-align: center; 
    
}

p, p i {
    -o-transition: -o-transform 1s;        
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;    
    -ms-transition: -ms-transform 1s;    
    transition: transform 1s;    
}

p:hover {
    -o-transform: scale(1.5);     
    -webkit-transform: scale(1.5); 
    -moz-transform: scale(1.5);     
    -ms-transform: scale(1.5);         
    transform: scale(1.5);         
    
} 
p:hover i { 
    -o-transform: scale(0.75);             
    -webkit-transform: scale(0.75); 
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);         
    transform: scale(0.75);             
}