是否保留1个div上的转换效果，以避免移动后面的div

Question

1。我有一行4列的div，悬停时会移动一点(带边距和填充(。如何在不添加固定高度的情况下阻止此移动移动其下方的内容。它是一个流动的布局，所以有了固定的高度，可以有足够的移动空间，随着窗口宽度的减小和图像的缩小，下面的内容开始变得太远。

2.为了让jsFiddle工作所需的赏金。

似乎即使我有transition: all，填充底部的所有都会立即添加，而页边空白顶部会转换300ms。填充不是也应该转换吗？我想那样可以摆脱跳跃。我试着在悬停时转换高度以获得同样的效果，但它也有同样的问题。高度只是增加了，而不是转换。

我做了一个jsFiddle来玩。

HTML:

<header class="sectionTitle lightboxes clearfix">
     <h3><i class="i-small icon-folder-open"></i><strong>Portfolio</strong></h3>
</header>
<article id="row2fluid" role="presentation">
    <section id="row2col1"> <a class="slider" href="#"><img src="http://mtctinc.com/images/folioImg1.jpg" alt="porfolio 1" />
            <div class="caption">
                <h3>Example 1</h3>
                <span>Slider/Slideshow</span>
            </div>
         </a>   
    </section>
    <section id="row2col2"> <a class="youtube" href="#"><img src="http://mtctinc.com/images/folioImg2.jpg" alt="portfolio 2" />
                <div class="caption">
                    <h3>Example 2</h3>
                    <span>Youtube</span>
                </div>
                </a>
    </section>
    <section id="row2col3"> <a href="#" class="clearfix"><img src="http://mtctinc.com/images/folioImg3.jpg" alt="porfolio 3" />
                    <div class="caption">
                        <h3>Example 3</h3>
                        <span>Flash</span>
                    </div>
                    </a>
    </section>
    <section id="row2col4"> <a href="#" class="clearfix"><img src="http://mtctinc.com/images/folioImg4.jpg" alt="portfolio 4" />
                        <div class="caption">
                            <h3>Example 4</h3>
                            <span>HTML</span>
                        </div>
                        </a>
    </section>
</article>
<div id="moreContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget nulla laoreet, blandit massa eu, mollis tellus. Duis pellentesque dui nec diam ullamcorper, ac dignissim sapien interdum. Proin in libero nec neque fermentum varius. Integer hendrerit, justo feugiat porttitor iaculis, nisl purus luctus neque, non ultrices magna quam et magna. Proin porttitor, metus sed commodo pharetra, lacus eros aliquet diam, eu auctor nisi diam quis felis.</div>

CSS：

.sectionTitle {
    border-bottom: 3px solid #e9e9e9;
    width:100%;
}
.sectionTitle h3 {
    font-size:11px;
    text-transform:uppercase;
    font-weight:bold;
    border-bottom: 3px solid #3b3b3b;
    display:table;
    margin-bottom: -2px;
    float: left;
    width: 100%;
    min-height: 33px;
    line-height: 19px;
    padding-bottom: 10px;
}
.sectionTitle strong {
    display: inline-block;
    padding-left:10px;
    line-height:14px;
}
.lightboxes {
    position: relative;
    clear:both;
    padding-top: 30px;
}
#row2fluid {
    text-align: center;
    position: relative;
    float: left;
    width: 100%;
}
#row2fluid img {
    opacity: .8;
    border: none;
    -webkit-transition:all 300ms;
    -o-transition:all 300ms;
    -moz-transition:all 300ms;
    transition:all 300ms;
}
#row2fluid a:hover img {
    opacity: 1;
    margin-top: -16px;
}
#row2fluid a:hover .caption h3 {
    color: #F15A2B;
}
#row2fluid .caption {
    border-bottom: 1px solid #E9E9E9;
    margin: 0px 3px;
    line-height: .7em;
    padding: 14px 0 30px;
}
#row2fluid a:hover .caption {
    border-bottom: 1px solid #F15A2B;
    background-color: #f7f7f7;
    padding-bottom: 46px;
}
#row2fluid .caption span {
    font-style: italic;
    font-size: 12px;
    color: #ACACAC;
}
#row2col1 {
    clear: both;
    float: left;
    margin-left: 0;
    width: 24.1758%;
    display: inline-block;
    padding-top: 40px;
    margin-top: -1px;
}
#row2col2 {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 24.1758%;
    display: inline-block;
    padding-top: 40px;
    margin-top: -1px;
}
#row2col3 {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 24.1758%;
    display: inline-block;
    padding-top: 40px;
    margin-top: -1px;
}
#row2col4 {
    clear: none;
    float: left;
    margin-left: 1.0989%;
    width: 24.1758%;
    display: inline-block;
    padding-top: 40px;
    margin-top: -1px;
}
#row2col1:hover {
    border-top: 3px solid #F15A2B;
    padding-top: 37px;
}
#row2col2:hover {
    border-top: 3px solid #F15A2B;
    padding-top: 37px;
}
#row2col3:hover {
    border-top: 3px solid #F15A2B;
    padding-top: 37px;
}
#row2col4:hover {
    border-top: 3px solid #F15A2B;
    padding-top: 37px;
}
#moreContent {
    clear: both;
    position: relative;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
    padding-top: 20px;
}

Answer 1

您只需要添加-webkit-transition:all 300ms; -o-transition:all 300ms; -moz-transition:all 300ms; transition:all 300ms;也添加到标题中。

请参阅此处http://jsfiddle.net/ZuU8V/4/