In this article, we will see a jquery image magnifier on mouse hover. Using an image magnifier you can enlarge image on mouse hover. In this example, users can directly zoom image in with the mouse wheel or pinch zoom on touch devices using javascript or image zoom on mouseover using jquery.
Also, you can use different types of plugins for zoom images. here we have used zoom.js CDN for zoom or magnify image. using zoom.js jquery that enables the user to show the full-size image on hover and view details with mouse movement.
So, let's see zoom image on mouseover using jquery, and how to zoom image on hover.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.js"></script>
<style>
body {
margin: 20px;
border: 1px solid grey;
}
h1 {
color: #26a69a;
}
.container {
display: block;
padding: 0px;
}
.contain {
position: fixed;
right: 10%;
top: 25%;
width: 200px;
height: 220px;
margin-top: 25px;
}
img {
width: 250px;
height: 250px;
margin: 20px;
}
b{
margin-left: 20px;
}
</style>
</head>
<body>
<center>
<h1>websolutionstuff.com</h1>
</center>
<div class="container-fluid">
<b>Move your Cursor Over the Image</b>
<div class="parent">
<img src="https://websolutionstuff.com/adminTheme/global_assets/images/favicon.png">
</div>
<span class="contain"></span>
</div>
<script>
$(document).ready(function() {
$('.parent').css('width', $('img').width());
$('img').parent().zoom({
magnify: 2,
target: $('.contain').get(0)
});
});
</script>
</body>
</html>
Output:
You might also like:
It is the poor hosting that is causing you so many issues. If you upgrade to advanced hosting based on your website need...
Apr-08-2022
In this article, we will see how to get a client's IP address in laravel 10. Here we will learn about retrieving the...
Apr-07-2023
In this article, we will see how to build a live chat app in laravel 9 and vue js. Here, we will learn how to creat...
Feb-02-2023
As a web developer, I understand the significance of embracing the latest technologies to stay ahead in the dynamic worl...
Aug-04-2023