Отключить наведение на ссылку, эффект наведения фонового изображения вызывает мерцание

Question

В настоящее время я работаю над изображением с эффектом зависания. Когда вы наводите курсор на изображение, ссылка становится видимой. Изображение имеет эффект размытия при наведении. Проблема заключается в том, что при наведении курсора на ссылку (которая становится видимой поверх изображения) изображение начинает мерцать (между размытыми и не размытыми).

Некоторый код:

$(document).ready(function() { 
 

 
    $(".realisatieslink1").hide(); 
 
    $(".realisatiesafb1").mouseenter(function() { 
 
    $(".realisatieslink1").show(); 
 
    }); 
 
    $(".realisatiesafb1").mouseleave(function() { 
 
    $(".realisatieslink1").hide(); 
 
    }); 
 

 
});

.realisatieslink1 a { 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
    display: inline-block; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    font-size: 15px !important; 
 
    border: 1px solid white; 
 
    color: white !important; 
 
} 
 
.realisatieslink1 { 
 
    margin-top: -120px; 
 
    z-index: 10; 
 
    position: relative; 
 
} 
 
.editing .realisatieslink1 { 
 
    margin-top: 0px; 
 
} 
 
.realisatieslink1 p { 
 
    margin-bottom: 0px; 
 
}

<div class="col-sm-3"> 
 

 
    <div class="ccm-custom-style-container ccm-custom-style-slide31-83 realisatiesafb1 realisatieafb"> 
 
    <a href="http://grafomantestsite2.be/index.php/realisaties"> 
 
     <img src="http://grafomantestsite2.be/application/files/6314/4161/6181/realisatie1.png" alt="realisatie1.png" width="401" height="269" class="ccm-image-block img-responsive bID-83"> 
 
    </a> 
 
    </div> 
 
    <div class="ccm-custom-style-container ccm-custom-style-slide31-85 realisatieslink1" style="display: none;"> 
 
    <p><a href="http://grafomantestsite2.be/index.php/realisaties">BEKIJK REALISATIES</a> 
 
    </p> 
 
    </div> 
 
</div>

Есть ли способ сделать мерцающую остановку?

Вот несколько скриншотов:

Edit: Я работаю в CMS concrete5, которая ограничивает мои возможности для редактирования HTML. Только что обнаружил, что эффект изображения не мерцает в firefox, он работает в хроме и сафари.

Edit: изображение CSS:

.realisatieafb { 
 
    width: 100%; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.realisatieafb img { 
 
    position: absolute; 
 
    left: -100%; 
 
    right: -100%; 
 
    top: -100%; 
 
    bottom: -100%; 
 
    margin: auto; 
 
    min-height: 100%; 
 
    min-width: 100%; 
 
}

Answer 1

Попробуйте это:

.realisatieslink1 { 
    margin-top: -120px; 
    /*z-index: 1;*/ 
    position: absolute; 
    display:none; 
} 
.realisatieslink1:hover { 
    display:block; 
} 
.realisatieafb img{ 
    position:relative; 
} 

$(document).ready(function() { 
    $(".realisatiesafb1").mouseenter(function() { 
    $(".realisatieslink1").show(); 
    }); 
    $(".realisatiesafb1").mouseleave(function() { 
    $(".realisatieslink1").hide(); 
    }); 

}); 
.ccm-custom-style-container.ccm-custom-style-slide31-85.realisatieslink1:hover { 
    display: block; 
} 

http://jsfiddle.net/LLz19way/2/

Update: Вы можете добавить класс при наведении курсора над текст для контейнера:

$(".realisatieslink1").mouseenter(function() { 
    $(".realisatiesafb").addClass('hover'); 
    }); 
    $(".realisatieslink1").mouseleave(function() { 
    $(".realisatiesafb").removeClass('hover'); 
    }); 

Answer 2

Если это нормально для вас, вы можете перемещать realisatieslink1 внутри realisatiesafb1. Тогда все должно работать.

http://jsfiddle.net/pLtc88he/