I'm currently facing an issue with my thumbnails where I can either have a hover state or the Magnific popup working, but not both at the same time.
The overlay is triggered by the class "overlay" within the div.
Below is the HTML for the image that pops up (without the functioning overlay):
<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>
And here is the HTML for the image that has a working overlay (but the image popup does not work):
<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>
Furthermore, here is the relevant CSS code for the hover state:
.mix_all:hover .overlay {
background: url(http://i.imgur.com/DZcK9ge.png) no-repeat center !important;
background-color: #de6573 !important;
opacity: 0.9;
}
For a visual representation and to see both examples in action, you can check out this jsfiddle link: http://jsfiddle.net/yashar/wz4BT/10/