title: Reverse img scale using CSS?
body: <p>I am trying to do something with CSS I do no think has been done before. I have used CSS to make an image animate larger (grow in size smoothly) in scale when the mouse hovers over the img. It is a great effect, and can be used to make nice portfolios or cool menus like an apple OS X dock. However, I saw recently a site that scaled the image back, making it smaller and then showing text and thought it was great. It uses JavaScript and a hint of JQuery, but I was wondering if this can be done in CSS alone? Below is the code for scaling the image larger:</p>
  
  <pre><code>a:hover, a:focus { 
      z-index:440 
  }
  a img {
      border:0;
      -webkit-transition:all .2s; 
      -moz-transition:all .2s;
  }
  ul.Port a img {
      -webkit-transform-origin: top;/
      -moz-transform-origin: top; 
  }
  a:hover img, a:focus img {
      -webkit-transform: scale(1.5);
      -moz-transform: scale(1.5);
  }
  </code></pre>
  
  <p>If I change the values to negative, I get issues with the img flashing in and out of proper size, and it does nto smoothly scale smaller, but becomes eradicate. Is what I am asking to do just not possible in CSS? Or am I missing something? I have played around with this for a few hours, but cannot get it to just work. </p>