如何停止移动位置的动画divs

Question

我在此页面上有div div内的8行div。 http://etreecycle.co.uk/websites/MPW/admin/

正如你所看到的，当你将鼠标悬停时，展开效果会导致div行移动到位。这只是因为我将图像添加到中心才开始发生。

EDIT;我与图像同时添加了链接。这可能会导致更改。

注意; div是用一个PHP循环制作的，所以我不能以另一种风格来设计风格。

这是基本的代码;

<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> 

这是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

这是一种情况，其中float: left胜过display: inline-block。您正在使用inline-block以使您的div彼此相邻。当您悬停高度更改并将其他元素向下推时。如果您使用float: left，那么这些元素将从文档的流程中取出，并且不能再以这种方式相互影响。

/*********** 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>

简单地改变display: block到float: left修复该问题。这不是解决这个问题的唯一方法，只是其中之一。如果你使用这种方式，你会想确保清除你的浮球。 clearfix method很好地工作。

Answer 2

当动画height财产，动画容器的大小变化，因此图像的整个“行”需要更多的空间，向下推动下一行。看看这个图（背景为红色的清晰度）：

相反动画通过width和height性质，其影响在页面布局的变化，简单地使用transform属性，该属性不影响页面流：

.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 */ 
} 

产生的变化应该是这样的：