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

Question

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

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”class，这样占位符图像就不会受到影响。

注意：从您的 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/

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

How to create a image transition hover effect with css without breaking the grid layout

html

css

grid

hover

transition