search

TwistedOrange / Bloc-docs

0 stars 0 forks source link

jQ-CSS: Image zoom on hover #2

Open TwistedOrange opened 7 years ago

TwistedOrange commented 7 years ago

citation

Image zoom in/out on hover with jQuery and CSS

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>

CSS

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