Increase child height on hover without knowing parent height - css

Question

I have a column div with many rows. Rows items are made dynamic so i don't know how many items each row will have.
When I hover over an item I want to increase the width and height of the item. The problem is that when I hover over an item of the row which has the most items it will push everything down (last row in my demo).
Is there a way to fix that without using jQuery to find the height of the largest row and add it as height on selector class? Is this possible? And if it isn't possible can I make an item either hovering over the item bellow it or making the item bellow it decrease its height so I won't have that problem?
Thanks in advance for your replies
PS: Text also increases when hovering I just forgot to add it on demo and it's not important.
HTML
<div class="section columns">
<div class="column">
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 1
</div>
</div>
</div>
<div class="column">
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 2
</div>
</div>
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 3
</div>
</div>
</div>
<div class="column">
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 4
</div>
</div>
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 5
</div>
</div>
<div class="row">
<div class="background notransition">
</div>
<div class="borders">
</div>
<div class="score">
46
</div>
<div class="text">
Test text 6
</div>
</div>
</div>
</div>
<div>
I don't want this text to move when i hover and height increases
</div>
CSS
.section.columns {
width: 1340px;
color:#fff;
}
.section {
margin-left: auto;
margin-right: auto;
width: 1340px;
padding-left: 3px;
}
.column {
display: inline-block;
width: 180px;
position: relative;
vertical-align: top;
margin-right: 10px;
font-family: 'Teko',sans-serif;
padding-bottom: 20px;
}
.column .row:hover {
width:207px;
height:40px;
z-index:1000;
}
.column .row {
width: 180px;
height: 35px;
background-color: #1d1d1d;
position: relative;
overflow: hidden;
border-bottom: 1px solid #585858;
border-right: 1px solid #585858;
cursor: pointer;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.column .row:hover .background {
background-position: center;
width: 207px;
height: 40px;
opacity: .8;
-webkit-filter: unset;
-moz-filter: unset;
-o-filter: unset;
-ms-filter: unset;
filter: unset;
}
.column .row .background {
background-image:url("http://i.imgur.com/wSofTXx.jpg");
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 207px 40px;
width: 180px;
z-index: 0;
opacity: .3;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
}
.notransition {
-webkit-transition: none!important;
-moz-transition: none!important;
-o-transition: none!important;
-ms-transition: none!important;
transition: none!important;
}
.column .row .borders {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-left: 4px solid #2887ff;
border-bottom: 1px solid rgba(0,0,0,.5);
border-right: 1px solid rgba(0,0,0,.5);
z-index: 1;
}
.column .row .score {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40px;
line-height: 35px;
font-size: 1.5em;
text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
background-color: rgba(0,0,0,.5);
text-align: center;
z-index: 5;
border-left: 1px solid #3e3e3e;
}
.column .row .text {
z-index: 2;
width: 180px;
height: 36px;
line-height: 35px;
padding-left: 18px;
position: absolute;
text-shadow: -1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;
word-wrap: break-word;
font-size: 1.5em;
transition: all .3s ease;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
-moz-transition: all .3s ease;
}
DEMO

Answer 1

Instead of changing it's height, why not change it's scale. Scale doesn't impact the natural flow of elements, and all elements will behave as if the size of the target hasn't changed.
.row {
transform-origin: 0% 50%;
}
.row:hover {
transform: scale(1.2);
}
Transform origin is used to make sure the element moves to the right when scaling instead of expanding in all directions.