CSS列 - 缩放不起作用

Question

我有3个CSS列。我使用这个CSS：

.articles {
  margin-top: 60px;
  -webkit-columns: 3 220px;
     -moz-columns: 3 220px;
          columns: 3 220px;
  -webkit-column-gap: 5px;
     -moz-column-gap: 5px;
          column-gap: 5px;
}

.articles > .col {
  position: relative;
  text-align: center;
  margin-bottom: 5px;
}

现在我想在悬停时缩放列，但是当我添加缩放代码时：

.articles > .col {
  ...
  -webkit-transition: all 0.8s ease; /* Safari and Chrome */
     -moz-transition: all 0.8s ease; /* Firefox */
      -ms-transition: all 0.8s ease; /* IE 9 */
       -o-transition: all 0.8s ease; /* Opera */
          transition: all 0.8s ease;
}

.articles > .col:hover {
  -webkit-transform:scale(1.10); /* Safari and Chrome */
     -moz-transform:scale(1.10); /* Firefox */
      -ms-transform:scale(1.10); /* IE 9 */
       -o-transform:scale(1.10); /* Opera */
          transform:scale(1.10);
}

列缓慢缩放，当它停止缩放时，它会进入另一个colimn并按下新列中的所有列。

如何缩放列但不更改容器中其他列的位置？

编辑：HTML代码

<div class="articles">
  <div class="col">
    <img src="uploads/1.jpg" alt="Image">
     <span>
       <span class="fav"><i class="fa fa-heart-o"></i></span>
       <span class="date">17.08.2000</span>
       <h3>Title</h3>
       <a href="#">Link</a>
     </span>
   </div>
   ....
   ....
   ....
 </div>

用我的代码

Here's a fiddle。