html - 如何在不破坏网格布局的情况下使用css创建图像过渡悬停效果

Question

我想在 CSS 中的图像上创建过渡悬停效果(与另一个图像交叉淡入淡出)。图像位于网格布局中。图像交叉淡入淡出有效，但网格中断。网格的其他字段在图像后面滑动。我怎样才能解决这个问题。这是代码:

HTML

            <div class="container">

            <div class="row">

                <div class="four columns"> 
                <div id="crossfade">
                <img src="images/vodafone-2.jpg" alt="placeholder" class="bottom">
                <img src="images/vodafone-1.jpg" alt="placeholder" class="top">
                </div>
                </div>

                <div class="four columns"> 
                <img src="http://placehold.it/350x350" alt="placeholder">
                </div>

                <div class="four columns"> 
                <img src="http://placehold.it/350x350" alt="placeholder">
                </div>

            </div>

CSS

#crossfade {
position:relative;
}

#crossfade img {
    position:absolute;
    left:0;
    opacity: 1;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;    
    transition: opacity 1s ease-in-out;
}

#crossfade img.top:hover {
    opacity:0;
}

Answer 1

因为第一个“.columns”div 中的内容都是绝对定位的，所以 div 本身没有高度。所以我所做的是将透明图像作为占位符放入该 div 中。我已将“.fade”类添加到要应用淡入淡出的图像，以便占位符图像不受影响。

注意:从您的 HTML 来看，我的印象是您使用 Foundation 作为框架？

<img src="http://www.officialiphoneunlock.co.uk/images/vodalogonew.png" alt="placeholder" class="bottom fade">
<img src="http://www.engagetv.com/sites/engagetv.com/files/logos/Vodafone-logo.jpg" alt="placeholder" class="top fade">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="350" height="350">

http://jsfiddle.net/partypete25/vnxy83us/