Search
Learn
Share

Image zoom in/out on hover with jQuery and CSS

Published by Profile Image MSC Web Solutions on 24 February, 2016
198 views
Using jQuery :

<script>
// Zoom in
$('#imgID').width(200); $('#imgID').mouseover(function() {
$(this).css("cursor","pointer"); $(this).animate({width: "500px"}, 'slow');
});

// Zoom out
$('#imgID').mouseout(function() {
$(this).animate({width: "200px"}, 'slow');
});
</script>

Using CSS :

<style>
#imgID {width : 200px;}
#imgID:hover {
cursor: pointer;
-ms-transform: scale(2);
-webkit-transform: scale(2);
transform: scale(2);
}
</style>