title: Changing content/src of image dynamically
body: <p>I am trying to create a simple animation using only HTML and CSS/CSS3.</p>
  
  <p>Now i am reading a bit into CSS3 tranforms.
  I am able to create this demo</p>
  
  <p><a href="http://jsfiddle.net/ySQ89/1/" rel="nofollow">DEMO</a></p>
  
  <p>Now this is just a plain hover animation which rotates the image 180 degrees for a duration of 2 seconds.</p>
  
  <p>Now im tring to add the <code>content:url</code> property in CSS to the <code>':hover'</code> part so that when the image flips the <em>source</em> of the image should change. However if I try this it does not work and the animation fails too.</p>
  
  <p>Can this be done using only CSS &amp; HTML or do I have to use javascript/jQuery. </p>
  
  <p><a href="http://jsfiddle.net/ySQ89" rel="nofollow">Not working Demo</a></p>
  
  <p>CSS</p>
  
  <pre><code>img{
  width:200px;
  height:300px;
  }
  img:hover
  {
  transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);    
  content:url("http://tinyurl.com/n6qyafn");
  transition-duration: 3s;
  -webkit-transition-duration: 3s;
  }
  </code></pre>