title: CSS3 transition effect with onclick
body: <p>I am working my way through CSS3 and kinda stuck at one problem.</p>
  
  <p>The issue is as follows : </p>
  
  <p>I have an image that is initially position at left-side of the screen :</p>
  
  <pre><code>.box img{
  margin-left:0;
  -webkit-transition:1s;
   }
  </code></pre>
  
  <p>Now, on hover, when I want the effect to take place , ie. move the image 500px from left when I hover over the image, the code follows is : </p>
  
  <pre><code>.box img:hover{
  margin-left:500px;
  -webkit-transition:1s;
   }
  </code></pre>
  
  <p>This works just perfect. The only issue is when I want the same effect to take when I click on the image. That is I want the image to move 500px from left upon click and stays there.
  Again when I click on the image, it should move back to it's original position.</p>
  
  <p>How should I go about it, please explain me!!!!</p>