Use jQuery Magnifier Plugins

Use jQuery Magnifier Plugins
Zoom is a simple yet powerful jQuery plugin cross-browser Image Magnifier jQuery plugin. Zoom in / out functionality using mouse wheel and use jQuery Magnifier Plugins.

 HTML 

<img id="image1" border="0" src="http://www.dynamicdrive.com/dynamicindex4/hayden.jpg" width="300"/>


More information please visit this url https://www.papawebdesigner.com/



 CSS 

.magnifyarea { 
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
.targetarea { 
width: 325px; 
height: 338px; 
margin-top:3px;
}
#two { 
height: 243px; 
}
.targetarea img {
margin: auto; 
display: block; 
position: relative; 
border-width: 0;
}
.thumbs { 
padding-top: 25px;
width: 325px;
text-align: center;
}
.thumbs a { 
text-decoration: none; 
}
.thumbs img { 
border-width: 0; 
}
#description, #description2 {
position: absolute; 
width: 325px; 
text-align: center;
font: bold 95% sans-serif;
margin-top: 3px;
color: #222;
background-color: #fff;
}



 JS 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script src="https://www.pixlritllc.com/wp-content/themes/octa/assets/js/multizoom.js"></script>

<script>
jQuery(document).ready(function($){
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://www.dynamicdrive.com/dynamicindex4/hayden.jpg' 
})

});
</script>

Follow On Social Media -

Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on Linkedin     -  https://www.linkedin.com/in/callmehitesh/ 
Follow on GooglePlus -  https://plus.google.com/118238268171156252992
Follow on pinterest    -  https://in.pinterest.com/frontendissue/