第二和第三列中的图像在悬停时随机消失

我有一个多列石工布局。

问题：每当我在第二或第三列（拉伸浏览器）将鼠标悬停在任何图像图像一段时间消失。

例子：这里是珍妮弗安妮斯顿（第二排中间的女人消失悬停）。

这是应该的：

的jsfiddle为方便：https://jsfiddle.net/RohitTigga/3bvdhozc/2/

下面的代码：

img { 
    max-width: 100%; 
    height: auto; 
    vertical-align: bottom; 
} 

.wrapper { 
    width: 92.5%; 
    padding: 1em; 
    margin: 0 auto; 

} 

.masonry { 
    -moz-transition: all .5s ease-in-out; 
    -webkit-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
    -moz-column-gap: 30px; 
    -webkit-column-gap: 30px; 
    column-gap: 30px; 
    -moz-column-fill: initial; 
    -webkit-column-fill: initial; 
    column-fill: initial; 
} 
.masonry .brick { 
    margin-bottom: 30px; 
} 

.masonry .brick img { 
    -moz-transition: all .5s ease-in-out; 
    -webkit-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 

    //with react 
    margin: 20px 0px; 

} 

.masonry .brick:hover img { 
    //opacity: .75; 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
} 

.masonry.bordered { 
    -moz-column-rule: 1px solid #eee; 
    -webkit-column-rule: 1px solid #eee; 
    column-rule: 1px solid #eee; 
    -moz-column-gap: 50px; 
    -webkit-column-gap: 50px; 
    column-gap: 50px; 
} 
.masonry.bordered .brick { 
    padding-bottom: 25px; 
    margin-bottom: 25px; 
    border-bottom: 1px solid #eee; 
} 
.masonry.gutterless { 
    -moz-column-gap: 0; 
    -webkit-column-gap: 0; 
    column-gap: 0; 
} 
.masonry.gutterless .brick { 
    margin-bottom: 0; 
} 

@media only screen and (min-width: 1024px) { 
    .wrapper { 
    width: 80%; 
    padding: 2em; 
    } 

    .masonry { 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    column-count: 3; 
    } 
} 
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
    .wrapper { 
    width: 85%; 
    padding: 1.5em; 
    } 

    .masonry { 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
    column-count: 2; 
    } 
}

HTML以下：

<div class="wrapper"> 
    <h1 class="FredokaOne quote">Life's too short to wear boring clothes.</h1> 

    <div class="masonry"> 
     <div class="brick"> 
      <img src="https://images6.alphacoders.com/307/307794.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="http://media4.s-nbcnews.com/j/newscms/2015_41/1252321/151007-jennifer-aniston-mbm_f8d9da133d1c610e6f74da6378714832.nbcnews-fp-1200-800.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="https://static01.nyt.com/images/2015/10/11/magazine/11mag-minaj-cover/11mag-minaj-cover-facebookJumbo.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="http://media4.s-nbcnews.com/j/newscms/2015_41/1252321/151007-jennifer-aniston-mbm_f8d9da133d1c610e6f74da6378714832.nbcnews-fp-1200-800.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="http://www.billboard.com/files/styles/article_main_image/public/media/nicki-minaj-bb38-fea-2015-billboard-650.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="http://runthetrap.com/wp-content/uploads/2016/01/chi-kanye-west-honorary-doctorate-art-institute-20150317.jpeg"> 
     </div> 
     <div class="brick"> 
      <img src="http://runthetrap.com/wp-content/uploads/2016/01/chi-kanye-west-honorary-doctorate-art-institute-20150317.jpeg"> 
     </div> 
     <div class="brick"> 
      <img src="http://cosmouk.cdnds.net/15/38/1600x800/landscape-1442576280-ellie-goulding.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="http://cosmouk.cdnds.net/15/38/1600x800/landscape-1442576280-ellie-goulding.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="http://media4.s-nbcnews.com/j/newscms/2015_41/1252321/151007-jennifer-aniston-mbm_f8d9da133d1c610e6f74da6378714832.nbcnews-fp-1200-800.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="https://static01.nyt.com/images/2015/10/11/magazine/11mag-minaj-cover/11mag-minaj-cover-facebookJumbo.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="https://images6.alphacoders.com/307/307794.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="http://runthetrap.com/wp-content/uploads/2016/01/chi-kanye-west-honorary-doctorate-art-institute-20150317.jpeg"> 
     </div> 
     <div class="brick"> 
      <img src="http://cosmouk.cdnds.net/15/38/1600x800/landscape-1442576280-ellie-goulding.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="https://static01.nyt.com/images/2015/10/11/magazine/11mag-minaj-cover/11mag-minaj-cover-facebookJumbo.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="http://www.returnofkings.com/wp-content/uploads/2014/05/Barney-Stinson.png"> 
     </div> 
     <div class="brick"> 
      <img src="http://cdn-media-1.lifehack.org/wp-content/files/2014/09/ted-mosby.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="https://nancyicurtis.files.wordpress.com/2015/08/header3.jpg"> 
     </div> 
     <div class="brick"> 
      <img src="http://cdn.playbuzz.com/cdn/afb9c20a-a28d-42c5-a7eb-2b9e01299b71/49e9a846-49ea-4233-8db6-cb0f65041de9.png"> 
     </div> 
     <div class="brick"> 
      <img src="http://legendsrevealed.com/entertainment/wp-content/uploads/2015/11/lily2.jpg"> 
     </div> 

    </div> 
</div>

为什么会发生这种情况，如何可以这样解决？

来源

2016-10-04 Rohit Tigga

无法在Firefox中重现51 – Xufox

谢谢你的澄清@Xufox，我会补充一点，我在Chrome得到这个。 –

_“悬停时消失”_无法在铬上重现。虽然似乎有一个'css'：hover'，'mouseover'或'mouseenter'事件附加到图片在一秒钟之内切换可见性的元素，然后返回到可见状态。 – guest271314

问题是，您正在从无属性转换到transform: scale(1.1)，转换assumes有两个值，其中定义了转换的初始状态和结束状态。当效果交替出现时，会导致奇怪的闪烁和图像消失

检查以下updated fiddle。

但基本上添加以下内容到.masonry .brick img类，将向招：

.masonry .brick img { 
    /* transition stuff */ 

    -moz-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
}

希望它能帮助！

干杯。

编辑：好吧，显然也有一个铬的错误，使用缩放容器的列使他们的行为作为 overflow: hidden是活跃的，因此，削减图像的限制的列的包装定义。

我找到的解决方法是（等待它...）包括-webkit-backface-visibility: hidden;到.masonry类这样：

.masonry { 
    -webkit-backface-visibility: hidden; /* actual workaround */ 
    backface-visibility: hidden; /* perhaps this is not needed */ 
}

检查updated fiddle了解详情。 编辑：上一个链接错误。

来源

2016-10-04 02:40:44

感谢卢卡斯的帮助。快一问，为什么barney stinson，网格中的金发男性仍然闪烁？看起来这是唯一的图像。这是当我有3列拉伸。 –

@RohitTigga真的，这很奇怪，但显然Chrome有一个列周围缩放div的问题，我已经更新了答案，以反映该问题的解决方案。（ps：我猜想边缘上的所有图像都受到Barney Stinson问题的影响）。 –

卢卡斯，这个答案是legen ....我希望Chrome不是乳糖不耐症，因为该词的后半部分是乳制品。 –

将overflow: auto;添加到.brick（图片的父元素），即使使用最新的Chrome浏览器（7/1/2017），这也可以实现。注意：overflow: visible;将不起作用。我遇到了同样的问题，这个解决方法对我来说很有效，希望它能适用于你。

来源

2017-07-10 16:14:00 tkhuynh

第二和第三列中的图像在悬停时随机消失

回答

相关问题