I have a parent <div>
. Inside that I place some text and images. Now I need to zoom to a particular portion of that parent <div>
. Is it possible?
I have a parent <div>
. Inside that I place some text and images. Now I need to zoom to a particular portion of that parent <div>
. Is it possible?
If you want that image to be zoomed on mouse hover :
$(document).ready( function() {
$('#div img').hover(
function() {
$(this).animate({ 'zoom': 1.2 }, 400);
},
function() {
$(this).animate({ 'zoom': 1 }, 400);
});
});
?or you may do like this if zoom in and out buttons are used :
$("#ZoomIn").click(ZoomIn());
$("#ZoomOut").click(ZoomOut());
function ZoomIn (event) {
$("#div img").width(
$("#div img").width() * 1.2
);
$("#div img").height(
$("#div img").height() * 1.2
);
},
function ZoomOut (event) {
$("#div img").width(
$("#imgDtls").width() * 0.5
);
$("#div img").height(
$("#div img").height() * 0.5
);
}