Css 无法使用放大弹出窗口获得悬停状态

我有一个图像和背景悬停状态工作在我的缩略图上，但是我似乎只能得到悬停状态或放大弹出窗口工作，从来没有两者兼而有之

我的覆盖由div类“overlay”触发

以下是弹出图像的HTML（无功能覆盖）：

---

这里是JSFIDLE，它有两个示例：

我必须稍微修改一下HTML结构，还添加了两个单独的JS事件：应用于.mix选择器的放大弹出事件，以及应用于覆盖的单击事件，以允许它们点击锚定标记并触发弹出事件

链接：

Html:

JS:

<ul id="Grid">
    <li class="mix category_1 mix_all">
        <div class="overlay"> <a href="http://i.imgur.com/i5SwjyO.jpg"><img src="http://i.imgur.com/J4PaouI.jpg" alt="#"></a>

        </div>
    </li>
</ul>

<ul id="Grid">
    <li class="mix category_2 mix_all"> <a href="http://i.imgur.com/i5SwjyO.jpg"><img src="http://i.imgur.com/J4PaouI.jpg" alt="#"></a>

        <div class="overlay"></div>
    </li>
    <ul>

.mix_all:hover .overlay {
    background: url(http://i.imgur.com/DZcK9ge.png) no-repeat center !important;
    background-color: #de6573 !important;
    opacity: 0.9;
}

<ul id="Grid">
    <li class="mix category_1 mix_all">
        <div class="overlay"></div>
        <a href="http://i.imgur.com/i5SwjyO.jpg"><img src="http://i.imgur.com/J4PaouI.jpg" alt="#"></a>
    </li>
    <li class="mix category_2 mix_all"> 
        <div class="overlay"></div>
        <a href="http://i.imgur.com/i5SwjyO.jpg"><img src="http://i.imgur.com/J4PaouI.jpg" alt="#"></a>    
    </li>
</ul>

.mix_all .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

$('.overlay')
    .click(function(){
        $(this).next('a').trigger('click');
    });
$('.mix')
    .magnificPopup({
        delegate: 'a', // child items selector, by clicking on it popup will open
        gallery: {
            enabled: false //disabling the gallery for now
        },
        type: 'image' //type of lightbox
    });