ekleme donukluk vurgulu geçiş diğer görüntüler titriyorsa yapar ben kurulum şu var

Question

:

$('.home-cat-wrapper a').hover(function() { 
 
    var this_left = parseFloat($(this).find('.product-sticker-image').data('left')); 
 
    var this_right = parseFloat($(this).find('.product-sticker-image').data('right')); 
 
    var left = 0; 
 
    var right = 0; 
 
    if (this_left > 21) { 
 
    left = 2 * (this_left - 21); 
 
    } else { 
 
    left = 10; 
 
    } 
 
    if (this_right > 21) { 
 
    right = 2 * (this_right - 21); 
 
    } else { 
 
    right = 10; 
 
    } 
 
    $(this).find('.product-sticker-image').css({ 
 
    'top': '0', 
 
    'left': left + '%', 
 
    'right': right + '%' 
 
    }); 
 
    $(this).find('.home-page-category-hover').stop(true, false).fadeIn(200); 
 
}, function() { 
 
    var this_top = $(this).find('.product-sticker-image').data('top'); 
 
    var this_left = $(this).find('.product-sticker-image').data('left'); 
 
    var this_right = $(this).find('.product-sticker-image').data('right'); 
 
    $(this).find('.product-sticker-image').css({ 
 
    'top': this_top, 
 
    'left': this_left, 
 
    'right': this_right 
 
    }); 
 
    $(this).find('.home-page-category-hover').stop(true, false).fadeOut(200); 
 
});

.col-xs-12 { 
 
    padding-left: 0 !important; 
 
    padding-right: 0 !important; 
 
} 
 
.home-page-category-box { 
 
    padding: 0 20px; 
 
    text-align: center; 
 
    margin-bottom: 51px; 
 
} 
 
.home-cat-wrapper { 
 
    background-color: #f0f0f0; 
 
} 
 
.home-page-category-heading { 
 
    color: #ffffff; 
 
    font-size: 13.1px; 
 
    font-weight: 600; 
 
    background: #000000; 
 
    padding: 13px 0 10px; 
 
} 
 
.home-page-image-wrapper { 
 
    position: relative; 
 
} 
 
.home-page-category-hover { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: 0; 
 
    display: none; 
 
} 
 
.home-page-category-hover span { 
 
    color: #ffffff; 
 
    font-size: 12.44px; 
 
    background: url("../images/footer-background.jpg"); 
 
    font-weight: 600; 
 
    padding: 13px 0; 
 
    display: inline-block; 
 
    width: 100%; 
 
    -webkit-transition: color 0.2s ease; 
 
    -moz-transition: color 0.2s ease; 
 
    -ms-transition: color 0.2s ease; 
 
    -o-transition: color 0.2s ease; 
 
    transition: color 0.2s ease; 
 
} 
 
.category-image-wrapper { 
 
    width: 100%; 
 
    background: #f0f0f0; 
 
    padding: 45px 0 65px; 
 
    position: relative; 
 
    -webkit-transition: all 0.2s ease; 
 
    -moz-transition: all 0.2s ease; 
 
    -ms-transition: all 0.2s ease; 
 
    -o-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
} 
 
.category-sticker-container { 
 
    position: relative; 
 
} 
 
.product-sticker-image { 
 
    -webkit-transition: all 0.2s ease; 
 
    -moz-transition: all 0.2s ease; 
 
    -ms-transition: all 0.2s ease; 
 
    -o-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
    position: absolute; 
 
} 
 
.category-sticker-container > img { 
 
    width: 100%; 
 
    -webkit-transition: all 0.2s ease; 
 
    -moz-transition: all 0.2s ease; 
 
    -ms-transition: all 0.2s ease; 
 
    -o-transition: all 0.2s ease; 
 
    transition: all 0.2s ease; 
 
} 
 
.product-sticker-image img { 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
.home-cat-wrapper a:hover .category-image-wrapper { 
 
    background: #ffffff; 
 
} 
 
.home-cat-wrapper a:hover .category-image-wrapper .category-sticker-container > img { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="col-xs-12 home-page-right-container"> 
 
    <div class="col-sm-3 col-xs-6 home-page-category-box" style="height: 450px;"> 
 
    <div class="home-cat-wrapper col-xs-12 category-3"> 
 
     <a href="http://weadmire.dx3webs.com/film.html"> 
 
     <div class="col-xs-12 home-page-category-heading" style="height: 41px;">Film</div> 
 
     <div class="col-xs-12 home-page-image-wrapper"> 
 
      <div class="col-xs-12 category-image-wrapper"> 
 
      <div class="col-xs-12 category-sticker-container"> 
 
       <div class="product-sticker-image" data-top="17%" data-left="21%" data-right="21%" style="top: 17%; left: 21%; right: 21%;"> 
 
       <img src="http://weadmire.dx3webs.com/pub/media/catalog/product/a/l/alfred-hitchcock.png" alt="Film-artwork"> 
 
       </div> 
 
       <img src="http://weadmire.dx3webs.com/pub/media/catalog/product/cache/1/image/400x/925f46717e92fbc24a8e2d03b22927e1/n/a/natural-white.png" alt="Film"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="home-page-category-hover" style="display: block; opacity: 1;"><span>63 DESIGNS | SEE THEM</span> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-3 col-xs-6 home-page-category-box" style="height: 450px;"> 
 
    <div class="home-cat-wrapper col-xs-12 category-4"> 
 
     <a href="http://weadmire.dx3webs.com/design-architecture.html"> 
 
     <div class="col-xs-12 home-page-category-heading" style="height: 41px;">Design &amp; Architecture</div> 
 
     <div class="col-xs-12 home-page-image-wrapper"> 
 
      <div class="col-xs-12 category-image-wrapper"> 
 
      <div class="col-xs-12 category-sticker-container"> 
 
       <div class="product-sticker-image" data-top="17%" data-left="21%" data-right="21%" style="top: 17%; left: 21%; right: 21%;"> 
 
       <img src="http://weadmire.dx3webs.com/pub/media/catalog/product/a/d/admire-rio.png" alt="Design &amp; Architecture-artwork"> 
 
       </div> 
 
       <img src="http://weadmire.dx3webs.com/pub/media/catalog/product/cache/1/image/400x/925f46717e92fbc24a8e2d03b22927e1/n/a/natural-white.png" alt="Design &amp; Architecture"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="home-page-category-hover" style="display: none; opacity: 1;"><span>17 DESIGNS | SEE THEM</span> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Eğer Gördüğünüz kutusunu geldiğinizde hafif titreşim var, bir göz kırpma tişört görünür logo ve sonra aynı şekilde dışarı vurgulu olur. Arka yüz görünürlüğü ve diğer dönüşüm özellikleriyle denedim ama şans yok. Bu titremeden nasıl kurtulabilirim? Teşekkürler.

fiddle

Answer 1

Sadece .product-sticker-image sınıfa z-index ekleyin. demo

Answer 2

Beni bu duruma .category-sticker-container > img üzerinde transition: width 0.2s ease; kullanmalıdır:

.category-sticker-container > img { 
    width: 100%; 
    -webkit-transition: width 0.2s ease; 
    -moz-transition: width 0.2s ease; 
    -ms-transition: width 0.2s ease; 
    -o-transition: width 0.2s ease; 
    transition: width 0.2s ease; 
} 

JSfiddle here