Mouse BG

	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>

	<div class="container">
	<div class="column active">
	<div class="bg">
	<img src="https://images.pexels.com/photos/237018/pexels-photo-237018.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
	</div>
	</div>

	<div class="column">
	<div class="bg">
	<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/fall-1072821_1280.jpg">
	</div>
	</div>

	<div class="column">
	<div class="bg">
	<img src="https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_1280.jpg">
	</div>


	<div class="column">
	<div class="bg">
	<img src="https://cdn.pixabay.com/photo/2015/11/16/16/28/bird-1045954_960_720.jpg">
	</div>
	</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
	</body>
	</html>



	<style type="text/css">
	*{
	margin: 0px;
	padding: 0px;

	}
	.container{
	width: 100%;
	height: 100vh;
	background-color: #000;
	overflow: hidden;
	}
	.container .column{
	width: 25%;
	height: 100%;
	float: left;
	box-sizing: border-box;
	z-index: 1;
	}
	.container .column .bg{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: 1s;
	}
	.container .column .bg img{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: fill;
	}
	.container .column.active .bg{z-index: 2; opacity: 1;}
	.container .column.active .bg img{
	position: absolute;
	top: 0px;
	left: 0px;
	}
	</style>

	<script type="text/javascript">
	$(document).on('mouseover', '.column', function (){
	$(this).addClass('active').siblings().removeClass('active');
	});
	</script>

Code Design html