CSS: How to scale an image from the center instead of top-left

Question

So my problem is that I have an image and I set its CSS to have a

max-width: 100%  

which scales it at lower resolutions ( as will be seen in the fiddle below ). What I want is for the transition to take effect from the center of the image.

Currently; and from what I have seen from most the transitions I have done involving scale they expand from the top-left corner.

here is my fiddle: http://jsfiddle.net/Eolis/3ya98xh8/3/

Answer 1

Just replace width: 400px; with transform: scale(2,2) on :hover.

img {      width: 100%; max-width: 100%;  }  div {      position: absolute; left: 20%; top: 20%;      width: 250px;      transition: all 2s ease-in-out;  }  div:hover {      transform: scale(2,2)  }

<div>      <a href="http://photobucket.com/images/cat" target="_blank">          <img src="http://i583.photobucket.com/albums/ss278/campipr/coolcat.gif" border="0" alt="cat photo: cat coolcat.gif"/>      </a>  </div>