div上的不透明度转换是随机的“块状”

Question

我有一个平铺页面布局的HTML结构。这个想法是，当用户将鼠标悬停在图像图块上时，它会变得略微透明（使其背后的黑色背景变暗），然后显示一些先前隐藏的文本。

<div class="tileContainer">
    <a class="tileLink" href="/contact">
        <section class="tile">    
            <img src="/images/contact-s.jpg" srcset="/images/contact-m.jpg 600w, /images/contact-l.jpg 1000w, /images/contact-xl.jpg 1920w" alt="contact">
            <h1>Contact</h1>
            <p class="hidden">Temporary hover text</p>
        </section> 
    </a>
</div>

CSS：

.tileLink{
    display: block;
    float: left;
}

.tileLink:hover .tile img, .tileLink:focus .tile img{
    opacity: 0.65;
}

.tileLink:hover p, .tileLink:focus p{
    display: inline;
} 

问题是，有时（并且每次都不会发生这种情况），当你悬停一个瓷砖时，不透明度会非常块状。最初会是这样的：

在不透明度“跳跃”到瓷砖的其余部分之前，用深色背景填充其余部分。

我甚至不知道该为什么谷歌，更不用说开始调查原因了。查看此情况的网址是：http://streeten-new.streeten.co.uk/

任何帮助都非常感激。

更新

图片有转换：

.navTiles .tile img{
    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

当我删除它时，不透明度完美地工作......但理想情况下我想使用它，因此不透明度会逐渐消失。

Answer 1

这很有趣，我认为这是Chrome渲染错误。我不知道为什么会这样，但我设法在opacity元素上使用.999的初始.title img来解决这个问题。

.navTiles .tile img {
    opacity: .999;

    -o-transition: 0.4s;
    -ms-transition: 0.4s;
    -moz-transition: 0.4s;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

它将具有不透明性，但它会非常微妙地注意到。

试一试，看看它是否有效。

Answer 2

虽然可能是一个铬虫你可以尝试：

您将opacity悬停在图片上... Insteed，只需将<img>打包到div并将不透明度赋予此容器，而不是图像< / p>