如何在不破坏网格布局的情况下使用 css 创建图像过渡悬停效果
How to create a image transition hover effect with css without breaking the grid layout
我想在 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;
}
因为第一个“.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">
我想在 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;
}
因为第一个“.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">