转换发生时的图片CSS

-1

Please check the picture first我有8图片在4列和2行，基本上我想要的是以下内容：当在第一行中悬停2图片只有2图片应移动2行转型不是整个行。谢谢！转换发生时的图片CSS

.primary, 
.secondary, 
.third, 
.fourth, 
.fifth, 
.sixth, 
.seventh, 
.eight{ 
     float: left; 
     width: 300px; 
     height: 420px; 
     margin-top: -90px; 
     margin-left: 60px; 
     overflow: hidden; 
     font-size: 0.9em; 
     text-align: center; 
     display: block; 
     border-radius: 10px; 
     box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
     -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
     -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
     -webkit-transition: height 2s; 
       transition: height 2s; 
} 

.eight:hover, 
.seventh:hover, 
.sixth:hover, 
.fifth:hover, 
.fourth:hover, 
.third:hover, 
.secondary:hover, 
.primary:hover { 
    float: left; 
    display: block; 
    height: 550px; 
}

来源

2016-04-20 Jordan

请问你的HTML看看吗？你能提供那个吗？ – Adjit

如果你有行，并且你让行中的元素更大......当然它会推动下一行，你还期望什么？ –

请提供一些HTML到这个小提琴，并将其添加到您的问题：https://jsfiddle.net/wp9uj9o8/ –

由于过渡涉及到的高度，它会更容易考虑使用那些左浮动列。只需在名为.col的班级（或任何您想要授予的班级名称）的每3张图片周围放一个容器即可。

取出float和display样式应用到图像以及：

.primary, 
.secondary, 
.third, 
.fourth, 
.fifth, 
.sixth, 
.seventh, 
.eight{ 
    width: 300px; 
    height: 420px; 
    margin-top: -90px; 
    margin-left: 60px; 
    overflow: hidden; 
    font-size: 0.9em; 
    text-align: center; 
    border-radius: 10px; 
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
    -webkit-transition: height 2s; 
      transition: height 2s; 
} 

.eight:hover, 
.seventh:hover, 
.sixth:hover, 
.fifth:hover, 
.fourth:hover, 
.third:hover, 
.secondary:hover, 
.primary:hover { 
    height: 550px; 
} 

.col{ 
    height:auto; 
    position:relative; 
    border:1px solid blue; 
    width:33%; 
    float:left; 
}

见琴：https://jsfiddle.net/wp9uj9o8/5/

来源

2016-04-20 14:39:01

谢谢！你的逻辑运作良好 – Jordan

很高兴能够提供帮助。你能接受答案吗？ –

是的，这是我寻找的解决方案。非常感谢你的帮助！ – Jordan

你想要的图像放大悬停，而不是转换整排？

我已经快速去复制和添加悬停效果的过渡。它基本上改变了从110％悬停到100％的背景大小。

.primary{ 
    transition: all 0.2s; 
    background-image:url(https://placehold.it/300x550); 
    background-size: 110%; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-color: gray; 
    position: relative; 
}

，然后悬停

.primary:hover { 
    background-size: 100%; 
}

http://codepen.io/mikbeach/pen/pyKKXv

这codepen说明了什么，我试图更详细地做 - http://codepen.io/Grawl/pen/DovAI/

来源

2016-04-20 14:41:01 hurrahfox

转换发生时的图片CSS

回答

相关问题