css - css で他の div を妨げずに div のサイズを変更する方法

Question

基本的にdivであるページに多くのタイルがあるアプリケーションに取り組んでいます。div のホバー プロパティを変更して拡大したいと考えています。私の現在のcssは次のようなものです：

 .livetile{
   height: 110px;
   margin: 5px;
   padding: 0px;
   width: 110px;
   position: absolute;
   transition:width 2s;
   -webkit-transition:width 2s;
  }

 .live-tile:hover{
   -webkit-transform: scale(1.2);
   -moz-transform: scale(1.2);
   -moz-box-shadow: 0 0 3px 1px #fff;
   -webkit-box-shadow: 0 0 3px 1px #fff;
   box-shadow: 0 0 3px 1px #333;
 }

スケーリング効果は問題ないようです。ただし、スケーリングする代わりに、次のように div のサイズを明示的に変更しようとすると、次のようになります。

 .live-tile:hover{
    width:200px;
    height:200px;
  }

次に、ホバーされた div を囲むタイルが、それに対応するように再配置されます。ただし、他の div の位置を変更することなく、ある種のポップアウト効果を生成するために前面に来るようにしたいと考えています。

つまり、表示を拡大縮小するだけではなく、div のサイズを変更して、他の div と重なっても、他の div を移動せずに前面に来るようにしたいだけです。

また、ホバーされた div をより高い整数値に設定しようとしましz-indexたが、それでもうまくいかないようです。CSS トランジションとアニメーションの実験を始めたところです。どんな助けでも大歓迎です。

編集私が抱えている問題を説明するために、単純なjs フィドル を作成しようとしました。他のdivのサイズを変更したくありません。自分自身を明確に説明できれば幸いです。

注- CSS ソリューションのみが必要です。これはJqueryを使用して実現できることを知っています。