JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box1">
    <div class="hover"></div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" class="tree"></img>
</div>

CSS

.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;
}

JavaScript

$('.box1').hover(function() {
	$('.hover').fadeIn(1000);
}, function(){
    $('.hover').fadeOut(1000);
});