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 {
    height: 400px;
	width: 350px;
	margin: 0 auto;
	margin-top: 100px;
	float: left;
	overflow: hidden;
}

.tree {
    height: 100%;
	width: auto;
	display: block;
	position: relative;
}

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

JavaScript

$(document).ready(function(){

$('.box1').on('mouseenter', function() {

	$('.hover').fadeIn(1000);

});

$('.box1').on('mouseleave', function() {

	$('.hover').fadeOut(1000);

});
});