title: Can we zoom/scale image in popup using JQUERY library
body: <p>I have dynaically geneated images which needs to be zoom out/zoom in while do mouse hover.</p>
  
  <p>i tried below way,</p>
  
  <pre><code> .thumbnail_img img:hover
   {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  </code></pre>
  
  <p>}</p>
  
  <p>But it just scale the image and image become blur.</p>
  
  <p>tried below way also,</p>
  
  <pre><code>    $('#' + '&lt;%=dntbuddata.ClientID%&gt;').hover(function () {
          $(this).css({ width: "430px", height: "434px" });
      }, function () {
          $(this).css({ width: "130", height: "134%" });
      });
  }
  </code></pre>
  
  <p>Above way also scale the image and even UI distrub.</p>
  
  <p>It would be great if image ZOOM OUT inpopup dialog and not blur.</p>
  
  <p>As these all images are generated dynaimically, i cna't create two copies and switch between them on mouse over.</p>
  
  <p>Update:</p>
  
  <p>Now, i able to resolve image blur issue thorugh below called as suggestion. Now, How can i open this image into popup dialog  (disable/black backgrouond)?</p>
  
  <pre><code>   if ($('#' + '&lt;%=dntbudget.ClientID%&gt;')) {
      $('#' + '&lt;%=dntbudget.ClientID%&gt;').css({ width: "130px", height: "134px", 'max-height': "530px",'max-width': "534px"});
  
     $('#' + '&lt;%=dntbudget.ClientID%&gt;').hover(function () {
         //$(this).css({ width: "430px", height: "434px" });
         $(this).animate({ width: "530px", height: "534px" }, 'slow');
  
  
     }, function () {
         // $(this).css({ width: "130px", height: "134px" });
         $(this).animate({ width: "130px", height: "134px" }, 'slow');
     });
  </code></pre>
  
  <p>Thanks
  Dhaval soni</p>