css - Jquery, how to resize an Image around his center -


I am working on a web site and I would like to add a simple animation effect to the image buttons.

In this case, I need that when clicked the button will be smaller.

The problem is that the image button is not around its center (as I want it), but the angle of the image from the upper left.

Here's a link to better understand you:

As you can see, clicking the image changes the size of the button around its center. What do I have to do to fix it?

HTML code: 

  & lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; Resize & lt; / Title & gt; & Lt; Link rel = "stylesheet" type = "text / css" href = "pulsante.css" /> & Lt; Script src = "http://code.jquery.com/jquery-1.10.2.min.js" & gt; & Lt; / Script & gt; & Lt; Script src = "http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; $ (Document) .ready (function () {warning ("jQuery is working!");}); $ {Document} .ready (function () {$ ("# myDiv") Click (function () {$ ("# hicon"). Animate ({height: '50%', width: '50% ' });});}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; H1 & gt; Button & lt; / H1> & Lt; Div id = "mydiv" & gt; & Lt; An id = "home" href = "http://www.corioki.com/pulsante.php" & gt; & Lt; Img id = "hicon" src = "img / button_home_ita.png" /> & Lt; / A & gt; & Lt; / Div & gt; & Lt; / Body & gt;  
  
  
  
  
  
 = "post-lesson" itemprop = "Text"> 
 In my opinion, you have 2 options, you can either extend the margin at the same time as the width / height with the jacquery:  
  $ ("# MyDiv "). Click on ($ ("function") ($ ("$"). (Animate ({height: '50% ', width: '50%', 'margin-left': '25% ',' margin-top ':' 25% '});});

Or you use CSS3 transit / conversion: 

  $ ("# myDiv"). Click (function () {$ ('# Home'). ToggleClass ('Active');});  
  one # home {transit: all 0.2s linear; Display area; } A # Home IMG {Width: 100%; } A # home.active {transform: scale (0.5); }

Comments

Post a Comment