Question

I’m working on a wordpress theme and want to switch between two thumbnail images on hover.

The code that i have looks something like this :

<a class="thumb" href="posturl"> <img src="img1.jpg" class="image1" /> <img src="img2.jpg" class="image2" /> </a>

So now I need some css to change between image1 and image2 on hover.

And if somebody knows how i can get a fade effect with some javascript that would be greatly appreciated.

Answer 1

First, you want to get rid of the img tags and use only css:

a:link {
background: url("img1.jpg");
}
a:hover {
background: url("img2.jpg");
}

You could use javascript but that would get very complicated, CSS3 however will have fade effects ready soon:

a:link {
background: url("img1.jpg");
-webkit-transition:background 1s ease-in;  
-moz-transition:background 1s ease-in;  
-o-transition:background 1s ease-in;  
transition:background 1s ease-in;  
}
a:hover {
background: url("img2.jpg");
}