Blur Image To Clear Image Mouse Moving Effect using CSS and jQuery

Creative jQuery | January 29, 2021

This tutorial blog to learn how to create Image hover mouse moving effect using HTML CSS and jQuery.

Video tutorial of Image Hover Effect with Blur Image To Clear Image Mouse Moving Effect using CSS and jQuery

This tutorial video to learn how to create Image hover mouse moving effect using HTML CSS and jQuery.

You might like this

Image Hover Effect with Blur Image To Clear Image Mouse Moving Effect using CSS and jQuery [Source Codes]

This source code can help you to create Image Hover Effect with Blur Image To Clear Image Mouse Moving Effect using CSS and jQuery

jQuery library source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="mouse_area_wrap">	
	<div class="mouse_hover_area">
		
	</div>
	<div class="mouse">
			
	</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #fff;
}
.mouse_area_wrap{
	background:#000;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
}
.mouse_hover_area{
	width: 100%;
	height: 100vh;
	background:url('../images/pic1.jpg') left top no-repeat;
	background-attachment: fixed;
	background-size: 1366px 800px;
	opacity: 0.5;
	filter: blur(5px)	

}
.mouse{
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: url('../images/pic1.jpg') left top no-repeat;
	background-attachment: fixed;
	background-size: 1366px 800px;
	position: absolute;
	left: 50%;
	top: 50%;
	pointer-events: none;
	border:5px solid;

}

JavaScript Code

Copy

$(document).ready(function() {
	
	$(".mouse_hover_area").mousemove(function(event) {
		var top =$(window).scrollTop() - $(this).offset().top + event.clientY
		var left =$(window).scrollLeft() - $(this).offset().left + event.clientX
		$('.mouse').css({"left":left - 150,"top":top - 150});
		
	});
	
});