CSS div懸停幻燈片

Question

我不確定這是Webkit渲染錯誤還是什么？ 我有一個包含許多不同圖像的泥瓦工風格網格。 我進行了設置，以便當您在桌面瀏覽器上將它們懸停在它們上面時，帶有文本的div會向上滑動（文本在移動設備上永久可見）。 除在Chrome和Safari中外，所有其他功能都很可愛，僅在第一列上可滑動文本，當您將鼠標懸停在任何其他列上的圖像上時，文本將不會向上滑動，而且我也不知道為什么（在IE和FF中效果很好）

  .gallery{ -webkit-column-count:5; -moz-column-count:5; column-count:5; -moz-column-gap:1em; column-gap:1em; margin-top:7%; padding-bottom:5%; } .item{ display:inline-block; width:100%; height:auto; position:relative; overflow:hidden; } .description { position:absolute; bottom:-100px; left: 0; width:100%; font-family:Archivo Narrow; z-index: 1000; -webkit-transition:all 0.6s ease; transition:all 0.6s ease; } .description_text { background-color: rgba(0,0,0,.7); padding:10px; top:0; z-index:4; -webkit-transition:opacity.2s; -moz-transition:opacity.2s; -o-transition:opacity.2s; transition:opacity.2s; color: #fff; } img:hover + .description{ bottom:0; } 

  <div class="gallery"> <div class="item"> <img src="building1.jpg" /> <div class="description"> <div class="description_text"> <p>Building 1</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="building2.jpg" /> <div class="description"> <div class="description_text"> <p>Building 2</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="building3.jpg" /> <div class="description"> <div class="description_text"> <p>Building 3</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <a href="#"><img src="building4.jpg" /> <div class="description"> <div class="description_text"> <p>Building 4</p> <p>London EC2</p> </div> </div> </a> </div> <div class="item"> <img src="building5.jpg" /> <div class="description"> <div class="description_text"> <p>Building 5</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="building6.jpg" /> <div class="description"> <div class="description_text"> <p>Building 6</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="building7.jpg" /> <div class="description"> <div class="description_text"> <p>Building 7</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="building8.jpg" /> <div class="description"> <div class="description_text"> <p>Building 8</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="building9.jpg" /> <div class="description"> <div class="description_text"> <p>Building 9</p> <p>London EC2</p> </div> </div> </div> </div> 

在這種情況下，第一列顯示圖像1-6，其余列在第二列中，在第二列中過渡停止工作。 有任何想法嗎？

在圖像中，我嘗試突出顯示向上滑動的文本div（如果從Cedric的jsfiddle中提取，則可以在Chrome中看到，div僅在前兩個圖像上可見，而在其余兩個圖像上則不可見，並且懸停效果確實可以不行

Answer 1

好的，所以我設法解決了這個問題。 我所做的就是添加-webkit-column-count：1; 到我的CSS中的.description {}命令集，現在可以使用了

.description {
        position:absolute;
        bottom:-100px;
        left: 0;
        width:100%;
        font-family:Archivo Narrow;
        z-index: 1000;
        -webkit-transition:all 0.6s ease;
        transition:all 0.6s ease;
-webkit-column-count:1;
        }

但這僅適用於Chrome，不適用於Safari

Answer 2

我不確定我是否理解正確，但是從這里開始，Firefox和Chrome的行為似乎是相同的。

但是，您的文字疊加層會跳來跳去，因為在img:hover情況下它們設置為可見，在出現.description並自然地將其懸停后，情況並非如此。

解決方法是，您可能還想應用規則，使文本也對.description:hover可見。

這是一個JSFiddle演示的。

Answer 3

問題是column-count屬性，但我認為它可以解決：

 .gallery{ /*-webkit-column-count:5; -moz-column-count:5; column-count:5; -moz-column-gap:1em; column-gap:1em;*/ margin-top:7%; padding-bottom:5%; display: table; width: 100%; } .item{ display:inline-block; /*width:100%;*/ height:auto; position:relative; overflow:hidden; float:left; } .description { position:absolute; bottom:-100px; left: 0; width:100%; font-family:Archivo Narrow; z-index: 1000; -webkit-transition:all 0.6s ease; transition:all 0.6s ease; } .description_text { background-color: rgba(0,0,0,.7); padding:10px; top:0; z-index:4; -webkit-transition:opacity.2s; -moz-transition:opacity.2s; -o-transition:opacity.2s; transition:opacity.2s; color: #fff; } .item:hover .description{ bottom:0; } 

 <div class="gallery"> <div class="item"> <img src="http://sp5.fotolog.com/photo/21/61/103/roqro_85/1229095304477_f.jpg" /> <div class="description"> <div class="description_text"> <p>Building 1</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="http://sp5.fotolog.com/photo/21/61/103/roqro_85/1229095304477_f.jpg" /> <div class="description"> <div class="description_text"> <p>Building 2</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="http://sp5.fotolog.com/photo/21/61/103/roqro_85/1229095304477_f.jpg" /> <div class="description"> <div class="description_text"> <p>Building 3</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <a href="#"><img src="http://sp5.fotolog.com/photo/21/61/103/roqro_85/1229095304477_f.jpg" /> <div class="description"> <div class="description_text"> <p>Building 4</p> <p>London EC2</p> </div> </div> </a> </div> <div class="item"> <img src="http://sp5.fotolog.com/photo/21/61/103/roqro_85/1229095304477_f.jpg" /> <div class="description"> <div class="description_text"> <p>Building 5</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="http://sp5.fotolog.com/photo/21/61/103/roqro_85/1229095304477_f.jpg" /> <div class="description"> <div class="description_text"> <p>Building 6</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="http://sp5.fotolog.com/photo/21/61/103/roqro_85/1229095304477_f.jpg" /> <div class="description"> <div class="description_text"> <p>Building 7</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="http://sp5.fotolog.com/photo/21/61/103/roqro_85/1229095304477_f.jpg" /> <div class="description"> <div class="description_text"> <p>Building 8</p> <p>London EC2</p> </div> </div> </div> <div class="item"> <img src="http://sp5.fotolog.com/photo/21/61/103/roqro_85/1229095304477_f.jpg" /> <div class="description"> <div class="description_text"> <p>Building 9</p> <p>London EC2</p> </div> </div> </div> </div>