縮略圖在css轉換翻轉時閃爍

使用他們的Wordpress Post Featured Image調用的縮略圖似乎工作正常，直到我嘗試在翻轉時對它們應用不透明/飽和度效果。當盤旋時，其中四分之五的「閃爍」。我認爲在我的代碼中可能會有其他問題導致故障，因爲當我嘗試添加另一個<span>或<div>以在縮略圖中包含帖子標題時，它們也無法在翻轉過程中正確顯示。縮略圖在css轉換翻轉時閃爍

這裏的影響大拇指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，但沒有多少運氣。

來源

2015-10-20 ursalarose

您是否必須使用CSS3多列布局？我認爲它尚未準備好發展。我的意思是像'-webkit-column-count'這樣的屬性。 – makshh

CSS3列布局是我可以在此網站上獲得砌體類型顯示的唯一方法。你認爲我應該找到另一種解決方案？ – ursalarose

我認爲現在你可以使用砌體jQuery插件。 http://masonry.desandro.com/ – makshh

不確定這是否會解決您的問題，但是在啓動導致控制檯錯誤的JQuery庫（第51行）之前，您正在頭中調用此JQuery代碼（第20行）。

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

其次您引用這並不JS文件存在

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

我建議了首先清除這些問題，他們可以幫助您與懸停問題。

來源

2015-10-20 21:52:07 crazymatt

我需要那個jQuery函數來實現我的響應式畫廊縮略圖，而最令人尷尬的是我甚至不知道這些腳本插入的位置。他們不在我創建的頭文件中，我檢查了Functions.php文件，但沒有運氣。 – ursalarose

WP包含JQuery庫文件的副本並將其添加到頁面。看看你的主題文件夾，我認爲它的header.php文件是你會看到對JQuery.js文件的引用。我建議在之上添加代碼或將其添加到functions.php – crazymatt

我想，文件最初可能調用的唯一位置是在Functions.php中，因爲我的頭幾乎是空的。但是，當我試圖逐個刪除函數以找到罪魁禍首時，事情在我的主題設計方面變得非常難看。我想我只需要重新格式化這個主題！ – ursalarose

縮略圖在css轉換翻轉時閃爍

回答

相關問題