Enlarge Image with Smooth Transition – Jquery CSS
In this article we are going to see how to zoom an image when mouse pointer enters the image and how to make it to its original size when mouse leave.
We are going to use mouseenter and mouseleave events of jquery.
<html>
<head>
<meta charset='utf-8'/>
<title>Zoomin and Zoomout</title>
<script src="jquery-1.11.3.min.js"></script>
<style>
img
{
width:25%;
height:25%;
-webkit-transition:.3s all;
}
</style>
</head>
<body>
<img src="/Path of Image" id="image">
<script>
$('#image').mouseenter(function(){
$(this).css({width:"50%",height:"50%"});
});
$('#image').mouseleave(function(){
$(this).css({width:"25%",height:"25%"});
});
</script>
</body>
</html>
In this code, We are using -webkit-transition for smooth enlarging of image when mouseenters and taking back to its original size when mouse leaves.
Similar to mouseenter and mouseleave, we can substitute other events like mouseover, mouseout, hover etc.