Проблемы с jQuery и событием hover

Question

Что я хочу сделать, когда я наводил изображение, я хочу, чтобы изображение темнело, и я хочу, чтобы текст появлялся в центре затемненного изображения. Пожалуйста, посмотрите мой код на очень грубый пример того, что я хочу.

То, что я до сих пор: - Я использую свойство непрозрачности с JQ, чтобы затемнить изображение на парении - Я текст по центру с помощью CSS сниппет я нашел несколько месяцев назад, что появляется при наведении курсора мыши с использованием свойство дисплея

В принципе, у меня есть все компоненты, и он работает нормально, пока курсор не зависнет над текстом. Как показано в моей скрипке, непрозрачность переключается назад и вперед несколько раз и не останавливается, пока мышь не покинет текст.

tl; dr: Как сохранить текст и непрозрачность переключаться туда и обратно, когда я наводил курсор на текст?

Here is an example of my problem

CSS

.centered { 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 
} 

#news { 
    text-align:center; 
    border-top:1px solid #000000; 
    border-bottom:1px solid #000000; 
    padding:20px 0px; 
    background-color:#232323; 
} 
.newsImage { 
    width:100%; 
    height:auto; 
    position:relative; 
} 
.newsImageOverlay { 
    position:absolute; 
    text-decoration:none; 
    color:white; 
    background:none; 
    z-index:3; 
    display:none; 
} 

JQuery

$(document).ready(
    $("#a1").hover(
     function(){$("#a1").animate({opacity:'0.3'})}, 
     function(){$("#a1").animate({opacity:'1'});} 
    ); 
    $("#a1").hover(
     function(){$("#a1Ov").css("display","inline"), "slow"}, 
     function(){$("#a1Ov").css("display","none"), "slow";} 
    ); 
}); 

HTML

<div id="news" class="row"> 
    <div class="col-sm-4"> 
     <div id="a1Ov" class="newsImageOverlay centered">Title 1</div> 
     <img id="a1" src="project3.png" class="newsImage"/> 
    </div> 
</div> 

Любые предложения о том, как мой код может быть более эффективным/очиститель приветствуются!

Answer 1

Понял понял вне. То, что я закончил, - это оверлей всего этого с помощью обертки div, установить его как селектор событий и сделать его невидимым. Если у вас была та же проблема, что и я, сообщите мне, и я покажу вам метод, который использовал

Answer 2

добавить эти строки в файл CSS:

-webkit-transform:(0); 
-moz-transform:(0); 
-o-transform:(0); 
transform:(0); 

это должно предотвратить его мигания

Answer 3

Просто добавьте эффект парения в тексте, а также:

$("#a1, #a1Ov").hover(...