When working on your page where you have the image rollover action, you must switch to your text tab. This is the html he provided and it worked for me. (in spite of using h1 which I thought was reserved for themes...)

<h1>
  <a href="/">
   <img src="http:// escritouncine.files.wordpress.com/2012/12/FIRSTIMAGENAME" width="300" height="168" alt="Critical Alt Text" />
  </a>
 </h1>

Then this in your css:

h1 a {
	display: block;
	width: 300px;
	height: 168px;
}

h1 a:hover, h1 a:focus, h1 a:active {
	background: transparent url('http:// escritouncine.files.wordpress.com/2012/12/SECONDIMAGENAME') no-repeat;
}

h1 a:hover img, h1 a:focus img, h1 a:active img {
	background: transparent;
	visibility: hidden;
}

Attribute to: Mike Cherim

One caveat: I don;t consider this pure because ideally I would want to just designate the images by class or some way like that, but in his example he puts his actual image name in his css. So it would be most useful somewhere more permanent rather than a technique to be used randomly in a post:

When I tested it, I just had one tricky part. Meanwhile make 2 images exactly the size you need.

I tried it on a wordpress.com test site and the hover worked.

Anyway, anybody tried to do this and succed? Post your experience here