轉換髮生時的圖片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

回答

相關問題