How to zoom div content using jquery?

Question

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?

Answer 1

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     ); } 

Answer 2

@Gadde - your answer was very helpful. Thank you! I needed a "Maps"-like zoom for a div and was able to produce the feel I needed with your post. My criteria included the need to have the click repeat and continue to zoom out/in with each click. Below is my final result.

    var currentZoom = 1.0;      $(document).ready(function () {         $('#btn_ZoomIn').click(             function () {                 $('#divName').animate({ 'zoom': currentZoom += .1 }, 'slow');             })         $('#btn_ZoomOut').click(             function () {                 $('#divName').animate({ 'zoom': currentZoom -= .1 }, 'slow');             })         $('#btn_ZoomReset').click(             function () {                 currentZoom = 1.0                 $('#divName').animate({ 'zoom': 1 }, 'slow');             })     });