javascript - Div turns black on hover -

so want div fade div has black background @ 0.5 opacity on it. when hover ignores image in div , fills black fades other div. goes image --> solid black div --> fades second div. https://jsfiddle.net/70e890e6/

html:

<div class="box1">     <div class="img_hover_effect"></div>     <img src="images/portfolio/charity.png" class="box1_img">     <img src="images/portfolio/charity/2.png" class="box1_img2"> </div> 

css:

.img.img_hover_effect {  display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);  } 

jquery:

$(document).ready(function(){     $('.box1').on('mouseenter', function() {  $('.img_hover_effect').fadein(1000);  });  }); 

you can use jquery hover :

$('.box1').hover(function() {     $('.hover').fadein(1000); }, function(){     $('.hover').fadeout(1000); }); 

and css changes :

.box1 {     position:relative;     height: 400px;     width: 350px;     margin: 0 auto;     margin-top: 100px;     float: left;     overflow: hidden; }  .tree {     height: 100%;     width: auto;     display: block;     position: relative; }  .hover {     position:absolute;     background-color: rgba(0, 0, 0, 0.5);     width: 100%;     height: 100%;     display: none;     z-index: 10; } 

jsfiddle : https://jsfiddle.net/70e890e6/4/