Background rollover behaviour on soap/box feature box

[ybcmark 0]

Hi I have really been getting in to my soap box and feature boxes However I am wondering if it is possible to add a rollover behaviour to the boxes? What i want is to use two background images for texture/gradient, so that on rollover it changes colour (from one image to the other) - like http://www.apple.com/ does on their row of feature boxes under the main window on their homepage? I think this would be very cool as I could then simply include copy and transparent images in the box itself, yet combine with a mouseover function.

[gyoery 2]

I think css wise it is div:hover { hover state styling here} you are looking for. Though this is not compatible with old IE explorers... For your first box it would look something like this:

	#fbox_1008 {
	background: url( 'http://image1.jpg');
	width:200px; height100px;
	}
	#fbox_1008:hover {
	background: url( 'http://image2.jpg');
	width:200px; height100px;
	}
	

though you have to take out any image that is in the box now, as it would otherwise hide the background image. If you want to make it clickable just add a transparent link with width and height 100%.

[Rob 547]

Thanks Gyoery. That's a good suggestion.

[helvetik_a 0]

Hi! I do have the same problem. I try to create some rollover boxes but this is what happens when i'm taking out the image in the box-section: http://wp.tanzprojekte.ch/home-3/# Is there a way to fix this? thxs Corina