Efeito de escurecer (overlay) uma DIV com jquery

[Videres 3]

Eae pessoal, Tudo nos trinks?

Gostaria de saber com vocês q estão trabalhando a + tempo com jquery s é "possível" realizar efeito de escurecer tela em uma div dentro de outra quando o mouse estiver sobre ela (hover)?

Tenho a seguinte situação abaixo:

SCRIPT - A principio estou seguindo esse raciocinio

<script>
(function ($) {
$(".titulo").hide();


$(".content_overlay").mouseenter(function(){
$(".titulo").addClass("overlay");
$(".hover").fadeIn(400);


}).mouseleave(function() {
          $(".titulo").removeClass("overlay");


            });})(jquery); </script>

 

 

CSS

​.content_overlay{width:33%;  display:inline-block; margin-bottom: -2px; position:relative; overflow:hidden;}

.overlay{width:100%; height:100%; display:block; background-color: rgba(0,0,0,0.5); top:0; position: absolute;}

HTML

<div class="content_overlay">
    <div class="overlay"><h1>Title</h1></div>
    <div class='img'><img src="img_teste.jpg"/></div>

</div>

<div class="content_overlay">
    <div class="titulo"><h1>Title</h1></div>
    <div class='img'><img src="img_teste.jpg"/></div>
​
</div>

<div class="content_overlay">
    <div class="titulo"><h1>Title</h1></div>
    <div class='img'><img src="img_teste.jpg"/></div>
​
</div>

O grande problema do código acima é q a class overlay esta sendo adicionada em todas as divs com a class titulo ao colocar o mouse sobre content_overlay e o que gostaria era que a class fosse adicionada apenas na div (class=titulo) em que o mouse estivesse sobre.

Ex.:
Ao colocar o mouse acima de content_overlay, a class overlay só será adicionada na div titulo q consta dentro dela.

-------------------

N sei s deu p entender ou estou viajando teria um jeito bem + prático de fazer isso.. quem puder me dar alguma orientação de como devo proceder serei grato!!!

Com css3 sei q seria + fácil.. mas estava tentando ver com Jquery.. caso encontre antes posto aqui.. Abraço

[Videres 3]

Buenas madrugas, estudando + 1 pouco encontrei uma solução -> .find();

Documentação - > https://api.jquery.com/find/

 

Ex.:

$(".content_overlay").mouseenter(function(){
      $(this).find(".titulo").fadeIn(400); 
      //resolvi aplicar o efeito direto, mas poderia criar outra class normalmente


}).mouseleave(function() {
          $(this).find(".titulo").fadeOut(400); 

});

Bom galera, essa foi a solução q encontrei... funciona bem p mim.. mas s alguém tiver uma solução melhor, agradeço qualquer help ou orientação!! Espero q ajude outras pessoas! :yes:

Abraço