CSS Slider on Hover

[sunnah]

Is there a method to have a slider between two divs set at 50 % floated side by side that reveals the content of the left div by expanding to 80% on mouse over and the right div decreases to 20 %. Then the mouse over to the right div will increase it to 100% while decreasing the left div to 20%. Of course the transition between the two is at the same time should be gradual not an immediate click instance change.

[sunnah]

I hope I was explaining myself correctly in the beginning. Basically I am looking for the onMouseOUt for teh left and right divs to go back to its original width such as 50%. So the onMouseOver on either the left or right div will expand it to 80% while the right side decreasing to 20% This would work the same if for the other side too. When the user mouses over the right side which is currently at 20% the right div would expand to 800% and the left div will be at 20%. This transition happens simultaneously and is smooth. I was told the CSS3 property of transition would do something like this. AND I am only coding for IE 9+, Safari, Chrome, Firefox.

Maybe this is a combination and CSS3 and javaScript?

[sunnah]

UPDATE: Found an example http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition. But would need two of them side by side alternatively increasing and decreasing.

[Author]

Posts