jQuery/CSS - hover odskok po powiększeniu elementu

Kolejna rzecz, z którą nie wiem w jaki sposób sobie poradzić. Zamierzam uzyskać efekt, że po najechaniu na ikony, będą zmieniały kolor oraz się powiększały. Zrobiłem to za pomocą jQuery, coś takiego:

jQuery:

$(document).ready(function() {

	/* Icons hover */
	$(".icon-hover").mouseover(function(){ //hover

	    $(".icon-hover").css("color", "#587ca0").css("font-size", "150px");

	}).mouseout(function(){ //no hover
     
	    $(".icon-hover").css("color", "#34495e").css("font-size", "140px");

	    });
});

CSS:

#services .icon-size {
    font-size: 120px;
    color: #34495e;
    -webkit-transition: all 300ms;   
    -moz-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms; 
}

Prawie działa, tylko jest drobny problem, ponieważ powiększenie przesuwa tekst. Jak rozwiązać to przesunięcie/odskok?

Demo: http://testerix.site90.com/

Albo wypozycjonuj swoje powiększające się elementy absolutnie (a więc będą nad wszystkimi innymi elementami na stronie i nie będą ich przesuwać),
albo po prostu wpisz wysokość na sztywno tym elementom (a w zasadzie jakiemuś kontenerowi)