WTF., image rollovers...>;[] Options

[aesthetic]

I can't get my image rollovers to work :( I've tried countless different ways to do it, here's what I have now.

CODE

a.add {width:53px; height: 57px; display:block;
background-image:url(http://i13.tinypic.com/853zz8x.png);}
a.add:hover {cursor:help;}
a.add:hover img {visibility:hidden;}
</style>

<a class="add" href="##"><img src="http://i14.tinypic.com/8ggbin4.png"></a>

And of course there's an opening style tag.

[aesthetic]

No bueno, this is what I did:

CODE

.create{
    height:69px;
    width:43px;
    background-COLOR:transparent;  
    background: url(http://i4.tinypic.com/8dvtfsy.png);
    background-position:top left;
    background-repeat: no-repeat;
    display: block;}

.create:hover{
    background-position: top right;}
    

</style>

<a href="URLHERE" class="create"></a>

I even tried:

CODE

<a href="URLHERE" class="create"><img src="http://i4.tinypic.com/8dvtfsy.png"></a>