Наведите указатель мыши на логотип

Question

Я играю с эффектом наложения css, но не могу понять, как я получу шкалу серого.

Эффект зависания отлично работает при наведении изображения «bg», но когда курсор попадает в изображение «логотип», оттенки серого «bg» останавливаются.

Я бы хотел, чтобы это работало, так что только «bg» имеет оттенки серого, а не логотип.

Вы можете увидеть здесь http://codepen.io/Tonzr/pen/dNqVQQ

HTML-

<div class="container"> 
    <div class="row"> 

    <a href="" class="col-md-6"> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample36.jpg" class="bg"> 
     <img src="http://placehold.it/200x90/000000?text=LOGO" class="logo"> 
    </a> 

    <a href="" class="col-md-6"> 
     <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample83.jpg" class="bg"> 
     <img src="http://placehold.it/200x90/000000?text=LOGO" class="logo"> 
    </a> 

    </div><!-- END ROW --> 
</div><!-- END CONTAINER --> 

А вот SASS

.col-md-6 
    position: relative 
    overflow: hidden 
    width: 100% 
    height: 25rem 
    padding: 0 
    .bg 
    position: absolute 
    left: 50% 
    top: 50% 
    height: auto 
    width: 100% 
    -webkit-transform: translate(-50%,-50%) 
    -ms-transform: translate(-50%,-50%) 
    transform: translate(-50%,-50%) 
    &:hover 
     -webkit-filter: grayscale(90%) 
     filter: grayscale(90%) 
    .logo 
    position: absolute 
    top: 50% 
    left: 50% 
    margin-right: -50% 
    transform: translate(-50%, -50%) 

Спасибо за ваше время.

Answer 1

Решение: http://codepen.io/anon/pen/YNOEMq

.col-md-6 
    position: relative 
    overflow: hidden 
    width: 100% 
    height: 25rem 
    padding: 0 

    &:hover .bg 
    -webkit-filter: grayscale(90%) 
    filter: grayscale(90%) 
    ... 

Проблема заключается в том, если курсор входит в элемент логотипа, распространение парения событие не достигнет элемента Б.Г., поскольку они являются братьями и сестрами. Таким образом, решение состоит в том, чтобы поймать событие hover в родительском элементе привязки, а затем повлиять на дочерний bg.