html - 使用 css 转换时缩略图在翻转时闪烁

Question

使用他们的 Wordpress 帖子特色图片调用的缩略图似乎工作正常，直到我尝试在翻转时对它们应用不透明度/饱和度效果。当鼠标悬停时，其中 5 个中有 4 个会“闪烁”。我认为我的代码中可能还有其他原因导致了故障，因为当我尝试添加另一个 <span> 时或 <div>为了在缩略图中包含帖子标题，它们也无法在翻转时正确显示。

这是影响拇指的 CSS:

#columns {
    width: 90%;
    max-width: 970px;
    font-size: 16px;
    min-height: 300px;
    -moz-column-count: 5;
    -moz-column-gap: 5px;
    -moz-column-fill: auto;
    -webkit-column-count: 5;
    -webkit-column-gap: 5px;
    -webkit-column-fill: auto; 
    column-count: 5;
    column-gap: 5px;
    column-fill: auto;
    margin: 0 auto;
    overflow: auto;
}
.pin {
    -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid; 
    position: relative;
    border: 0;
}
.pin img {
    width: 100%;
    height: auto;
    margin: 5px 0 0 0;
}
.post-wrapper:hover img {
    -webkit-transition:all .4s;
    -moz-transition:all .4s;
    -ms-transition:all .4s;
    -o-transition:all .4s;
    transition:all .4s;
}
.post-wrapper:hover img {
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
}

这是我主页的 HTML:

<?php get_header(); ?>
<div id="main">

  <div id="columns">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="pin">

        <span class="post-wrapper">
<a href="<?php the_permalink() ?>"><?php echo get_the_post_thumbnail( $post_id, $size=0, $attr ); ?></a>
        </span>

    </div>
  <?php endwhile; ?> 
  <?php endif; ?>    
  </div>     

</div>
<?php get_footer(); ?>

这是我正在努力获得更好想法的测试网站: http://cks.whiterabbitstudio.us/

我确实已经尝试添加 -webkit-transform:translate3d(0,0,0);至 .post-wrapper:hover img运气不好。

Answer 1

不确定这是否会解决您的问题，但您在启动 JQuery 库(第 51 行)之前在标题(第 20 行)中调用了此 JQuery 代码，导致控制台错误。

jQuery(function() {
        jQuery( "div.gallery br" ).remove();
});

其次你引用了一个不存在的 JS 文件

http://cks.whiterabbitstudio.us/wp-content/themes/CKS/js/scripts.min.js?ver=4.3.1

我建议先解决这些问题，它们可能会帮助您解决悬停问题。