Magnific Popup позиция ошибка

Question

Существует странная ошибка происходит, когда вы получили ссылку запускающего Magnific Popup, и эта ссылка содержится внутри абсолютного позиционируемый элемент, который расположен внутри относительной позиционируемый элемент с переполнения: скрытый.

Чтобы воспроизвести ошибку, проверка этот пример в Chrome или Firefox:

http://codepen.io/mediadivisiongmbh/pen/bdRjKy

HTML

<div class="hover-container"> 
    <div class="hover-image"></div> 
    <div class="hover-content"> 
    <a class="image-popup" href="#">Evil Link</a> 
    </div> 
</div> 

CSS

.hover-container { 
    position:relative; 
    overflow:hidden; 

    /* Optional */ 
    width:50%; 
    background-color:gray; 
} 

.hover-image { 
    height:300px; 

    /* Optional */ 
    width:80%; 
    background-color:pink; 
    margin-left:10%; 
} 

.hover-content { 
    position:absolute; 
    top:100%; 

    /* Optional */ 
    height:100%; 
    width:100%; 
    text-align:center; 
    transition:top 0.5s; 
} 

.hover-container:hover .hover-content { 
    top:0; 
} 

JS

$('.image-popup').magnificPopup(); 

Answer 1

Для того, чтобы остановить это поведение просто добавить CSS:

.image-popup { 
    display:none; 
} 

.hover-container:hover .image-popup { 
    display:inline-block; 
}