Hinzufügen Opazität Hover-Übergang macht andere Bilder flimmern

ich folgende Konfiguration haben:Hinzufügen Opazität Hover-Übergang macht andere Bilder flimmern

$('.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>

Wenn Sie schweben die Box Sie es sehen können, leichtes Flimmern ist, erscheint ein Blinzeln in dem T-Shirt Logo und danach passiert es, wenn man schwebt. Ich habe versucht mit Rückseitensichtbarkeit und anderen Transformationseigenschaften, aber kein Glück. Wie kann ich dieses Flimmern loswerden? Vielen Dank.

fiddle

Quelle

2016-04-01 Janaka Dombawela

der Übergang die Ursache scheint besser zu sein überprüfen mich spezifischen Übergang zu verwenden nicht alle – madalinivascu

@madalinivascu ok lassen. –

@madalinivascu versucht, aber nicht funktioniert. :( –

Nur z-index-.product-sticker-image Klasse hinzuzufügen.
Überprüfen Sie die demo

Quelle

2016-04-01 09:10:27

Das hat funktioniert. Danke. –

Sie sollten transition: width 0.2s ease; auf .category-sticker-container > img in dieser Situation verwenden:

.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

Quelle

2016-04-01 09:06:21 oboshto

Hinzufügen Opazität Hover-Übergang macht andere Bilder flimmern

Antwort

Verwandte Themen