How can I stop animated divs from moving place - html

Question

I have a line of 8 divs within divs on this page.
http://etreecycle.co.uk/websites/MPW/admin/
As you can see when you hover the expanding effect causes the line of divs to move place. This has only started happening since I added the images to the centre.
EDIT; I added the link at the same time as the images. This may be causing the change.
Note; the divs are made with a PHP loop, so I can't style one differently then another.
This is the basic code;
<div class="option-box">
<a href="<?php echo './?page='.$box['page'][0]; ?>">
<div class="inner">
<div class="content">
<img alt="<?php echo $box['name'][0]; ?>" src="<?php echo $box['image_URL'][0]; ?>"/>
</div>
</div>
</a>
</div>
And this is the CSS;
/*********** Option Boxes ***********/
.option-box-wrap {
position: relative;
width: 1210px;
margin: 0 auto;
}
.option-box {
width: 300px;
margin: 0 auto;
position: relative;
display: inline-block;
}
.option-box .inner {
position: relative;
padding-bottom: 30px;
height: 300px;
text-align: center;
}
.option-box .inner .content:after {
content:'';
display: block;
position: absolute;
left: 12%;
bottom: 0px;
width: 80%;
max-width: 210px;
height: 10px;
background: transparent;
border-radius: 100px/50px;
box-shadow: 0 50px 40px rgba(0,0,0,0.8);
}
.option-box .inner .content {
border: 4px solid #fff;
border-radius: 20px;
background: -webkit-linear-gradient(#8AC007 100%, #8ac007 0%, #a5e116 100%);
width: 240px;
height: 240px;
display: block;
position: relative;
margin: 0 auto;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.option-box .inner .content:hover {
width: 250px;
height: 250px;
}
.option-box .inner .content img {
width: 90%;
height: 90%;
margin: 5%;
}

Answer 1

This is a case where float: left wins over display: inline-block. You're using inline-block in order to make your div's sit next to each other. When you hover the height changes and pushes the other elements down. If you use float: left then the elements are taken out of the flow of the document and can no longer influence each other in such a way.
/*********** Option Boxes ***********/
.option-box-wrap {
position: relative;
width: 1210px;
margin: 0 auto;
}
.option-box {
width: 300px;
margin: 0 auto;
position: relative;
float: left;
}
.option-box .inner {
position: relative;
padding-bottom: 30px;
height: 300px;
text-align: center;
}
.option-box .inner .content:after {
content:'';
display: block;
position: absolute;
left: 12%;
bottom: 0px;
width: 80%;
max-width: 210px;
height: 10px;
background: transparent;
border-radius: 100px/50px;
box-shadow: 0 50px 40px rgba(0,0,0,0.8);
}
.option-box .inner .content {
border: 4px solid #fff;
border-radius: 20px;
background: -webkit-linear-gradient(#8AC007 100%, #8ac007 0%, #a5e116 100%);
width: 240px;
height: 240px;
display: block;
position: relative;
margin: 0 auto;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
.option-box .inner .content:hover {
width: 250px;
height: 250px;
}
.option-box .inner .content img {
width: 90%;
height: 90%;
margin: 5%;
}
<div class="option-box">
<a href="#">
<div class="inner">
<div class="content">
<img alt="" src="http://lorempixel.com/300/300/city"/>
</div>
</div>
</a>
</div><div class="option-box">
<a href="#">
<div class="inner">
<div class="content">
<img alt="" src="http://lorempixel.com/300/300/food"/>
</div>
</div>
</a>
</div><div class="option-box">
<a href="#">
<div class="inner">
<div class="content">
<img alt="" src="http://lorempixel.com/300/300/nightlife"/>
</div>
</div>
</a>
</div><div class="option-box">
<a href="#">
<div class="inner">
<div class="content">
<img alt="" src="http://lorempixel.com/300/300/sports"/>
</div>
</div>
</a>
</div><div class="option-box">
<a href="#">
<div class="inner">
<div class="content">
<img alt="" src="http://lorempixel.com/300/300/people"/>
</div>
</div>
</a>
</div><div class="option-box">
<a href="#">
<div class="inner">
<div class="content">
<img alt="" src="http://lorempixel.com/300/300/transport"/>
</div>
</div>
</a>
</div><div class="option-box">
<a href="#">
<div class="inner">
<div class="content">
<img alt="" src="http://lorempixel.com/300/300/cats"/>
</div>
</div>
</a>
</div><div class="option-box">
<a href="#">
<div class="inner">
<div class="content">
<img alt="" src="http://lorempixel.com/300/300/abstract"/>
</div>
</div>
</a>
</div>
Simply changing display: block to float: left fixes the issue. This is not the only way to fix it, just one of many. If you use this way you will want to make sure to clear your float. The clearfix method works nicely.

Answer 2

When you animate the height property, the size of the animated container changes, and so the entire "row" of images takes more space, which pushes the next row downwards. Have a look at this illustration (the background was colored red for clarity):
Instead of animating via width and height properties, which affect a layout change in the page, simply use the transform property, which doesn't affect the page flow:
.option-box .inner .content:hover {
-webkit-transform: scale(1.1); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: scale(1.1); /* IE 9 */
transform: scale(1.1); /* Firefox 16+, IE 10+, Opera */
}
The resulting change should look like this: