CSS変換：ScaleはDevツールでのみ動作します

Question

イメージをホバリングしたときにホバリングされる単純なホバー効果を実現しようとしています。不思議なことに、Chrome開発ツールの[強制要素状態]の[：ホバー]ラジオボタンをクリックすると、効果は期待どおりに機能しますが、画像上にカーソルを置くと、サイコロは表示されません。どんな洞察も大いに評価されるだろう！

これは（画像は、半不透明なオーバーレイを持っている）

<article class="news-loop_item"> 
    <img 
    src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af- 
    s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" class="news- 
    loop_img" alt="featured image"> 
    <div class="news-loop_overlay"> 
    <h2 class="news-loop_title">Title</h2> 
    <p class="news-loop_date">Date</p> 
    <div class="news-loop_summary">Summary</div> 
    </div> 
</article> 

そして、私のSCSS

.news-loop { 
    flex-wrap: wrap; 
    margin: -1rem; 
} 

.news-loop_item { 
    flex-basis: calc(100%/2 - 2rem); 
    height: 20rem; 
    margin: 1rem; 
    overflow: hidden; 
    position: relative; 
} 

.news-loop_img { 
    height: 100%; 
    object-fit: cover; 
    overflow: hidden; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
    position: relative; 
    vertical-align: middle; 
    width: 100%; 
} 

.news-loop_img:hover { 
    -webkit-transform: scale(1.15, 1.15); 
    transform: scale(1.15, 1.15); 
} 

.news-loop_overlay { 
    background: rgba(0, 0, 0, .75); 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
} 

.news-loop_overlay:hover { 
    background: rgba(0, 0, 0, .5); 
} 

​​

Answer 1

これをチェックアウト、あなたのホバーセレクターが間違っているということです理由：

.news-loop_item:hover .news-loop_img { 
    -webkit-transform: scale(1.15, 1.15); 
    transform: scale(1.15, 1.15); 
} 

は、親要素がホバーイベントを必要とする参照してください。

Answer 2

あなた.news-loop_overlayクラスのdiv要素は「キャプチャしているので問題はある私のマークアップです'ホバー効果。

z-index: -1;をそのdivに追加すると、スケールが機能することがわかります。