Jump to content


Background rollover behaviour on soap/box feature box

This topic has been archived. This means that you cannot reply to this topic.
3 replies to this topic

#1 ybcmark



  • Members
  • 29 posts

Posted 03 April 2012 - 12:41 PM

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.

#2 gyoery



  • Members

  • 252 posts

Posted 03 April 2012 - 12:52 PM

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%.

#3 Rob


    One Smart Egg

  • Members
  • 13575 posts

Posted 03 April 2012 - 07:49 PM

Thanks Gyoery. That's a good suggestion.

#4 helvetik_a


    Advanced Member

  • Members
  • 99 posts

Posted 23 August 2012 - 07:59 AM

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