Hi all,

 

Was hoping someone might be able to help me with a div animation in jQuery that I am trying to achieve. Basically the idea is a patch of grass that on hover splits in half to reveal the soil underneath. So far I have this:

 

http://www.grahamtottle.co.uk/sliding-image-test.html

 

The problem I have is that I want the coloured bits of the grass images to be hidden behind each other until the split occurs. Basically these bits are going to be rough edges, which will be revealed as the grass splits. No matter what I do though I can't seem to get these bits to hide behind each other and then be revealed on animation.

 

Can anyone offer any advice on how this could be achieved?

 

Thanks in advance

I am no expert on jQuery but would you not position those images underneath the grass in the position they will appear when the bottom image is revealed (so 3 layers of images - top is the grass, 2nd are the edges positioned where they will appear and bottom is the soil)?

I am not an expert at jQuery but I would remove the colored bits from the image so its just the grass.

When you hover you could apply a border-bottom or a border top to the image.

 

$(".box_container").hover(function(){
 $(".top-image img").css("border-bottom","10px solid red");
});

 

Thats the basic idea.