图像悬停时微小的但很烦人的错误

Question

我在我的投资组合网站上进行了最后的修改，但我有一些烦人的错误需要修复。

这是我的首页的一个工作示例： http://itu.dk/people/mbul/buch/buchstudio.html

我在图像上有这种悬停效果，但在Chrome中，黑色叠加层不会覆盖整个图像，直到短暂的一秒到晚，导致一个丑陋的垂直＆＃34;间隙＆＃34;。这只是中间图像的问题。有点难以解释，但我希望截图有意义：

我应该正确地提到我在Mac上。

有关如何修复它的想法吗？

这是代码

<section class="project_main_container">
    <ul class="clearfix">       
        <li>
            <div class="project_container">
            <a href="projects/spis.html"><div class="project_media">    
                <img class="project_image" src="img/thumbs/thumbs_1.jpg">
            </div>
            <div class="project_text">
                <h4>Spis</h4>
                <p class="project_tags">A cookbook</p>
            </div>
            </a>
            </div>
        </li>       
    </ul>      
</section>


.project_media:after{
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(24,24,24,1);
    opacity:0;
    transition: all 0.2s;
    -webkit-transition: all 0.4s;
    }

.project_container:hover .project_media:after{
    opacity: 1;
    }

.project_main_container {
    width: 100%;
    }

 .project_container {
    float: left;
    width: 33.333%;
    background-size:cover;
    overflow:hidden;
    position:relative;
}

.project_container .project_text {
    text-align:center;
    position:absolute;
    top:45%;
    width:100%;
    opacity: 0;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition-delay: 0s;
    -webkit-transition-delay: 0s;

    }

.project_container h4, .project_container p {
    text-align:center;
    position:absolute;
    top:45%;
    width:100%;
    display:none;   
    } 

.project_container:hover h4, .project_container:hover p {
    display:block;
    } 

.project_image {
    width: 100%;  
    }

.project_container:hover .project_text {
   transition-delay: 0.2s;
    -webkit-transition-delay: 0.2s;
    opacity: 1;}