禁用链接上的悬停，背景图像悬停效果导致闪烁

Question

I'm currently working on an image with a hover effect. When you hover over the image, a link becomes visible. The image has a blur effect on hover. Problem is when you hover over the link (that becomes visible on top of the image) the image starts flickering (between blurred and not blurred).

Some code:

 $(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> 

Is there a way to make the flickering stop?

Here are some screenshots:

Edit: I'm working in the CMS concrete5 which limits my abilities to edit the HTML. Just discovered that the image effect does not flicker in firefox, it does in chrome and safari.

Edit: image 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

Try this:

.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: You can add a class when hover over the text, for the container:

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

Answer 2

If it is ok for you, you can move realisatieslink1 inside realisatiesafb1 . Everything should work then.

http://jsfiddle.net/pLtc88he/