悬停时CSS div幻灯片

Question

我不确定这是否是webkit渲染错误或者是什么; 我有一个Masonary样式网格，有许多不同的图像。我将它设置为当您将鼠标悬停在桌面浏览器上时，带有文本的div会向上滑动（文本在移动设备上永久可见）。所有的作品都很可爱，除了在Chrome和Safari中，文本向上滑动仅适用于第一列，当您将鼠标悬停在任何其他列中的图像上时，文本永远不会滑动，我不知道为什么（它在IE中工作正常FF）

＆＃13;

＆＃13;

    .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;
    	}

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

在这种情况下，第一列显示图像1-6，其余列在第二列中，这是转换停止工作的位置。有什么想法吗？

在图像中，我试图突出显示向上滑动的文本div（这可以来自Cedric的jsfiddle，正如你在Chrome中看到的那样，div只能在前两个图像上看到，但在其余部分并不存在悬停效果不起作用

Answer 1

好的，所以我设法解决了这个问题。我所做的只是补充 -webkit列数：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显示。

Here's a JSFiddle证明了这一点。

Answer 3

问题是列计数属性，但我认为它解决了：

.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>