I’m trying to build an image frame that has an animated (slide down) caption that comes out of the bottom of the image. I’ve got the CSS working so that PNG drop-shadows work on both the image frame and the caption box as well.
I’ve got the animation working, but it’s a little buggy. The bottom section of the image div that is supposed to be the ‘slot’ that the caption slides out of is expanding on animation, and small portions of the caption div are only appearing once the animation is completed (top and left sides).
If anyone can offer some suggestion as to what CSS I might add into to smooth this out. The jQuery involved in this project isn’t anything complex, so I felt it was more appropriate to post this in the CSS section of the forums.
I had a look at it but I couldn’t see a css solution.
The problem is the position:relative shift on the innerbox which only seems to occur once the animation has stopped and so the green box just pops up and across at the end. It doesn’t look too bad to me and I always find those jquery slides a little jumpy at the best of times.
Js isn’t my thing so I can’t suggest anything useful i’m afraid.
Thanks for checking it out. The green box shift at the end of the animation doesn’t look too horrible to me either, but the one thing that I do need to fix for sure is the gray part of the image frame expanding downwards with the animation.
Is it possible to at least get the height of the gray bottom part of the image frame to stay static throughout the animation?
Thanks! I had taken out the #bottom div so adding the height to the caption div would have messed it up, but I replaced the #bottom div to wrap around the caption and that worked great.
Looks good now, if only I could figure out that shift of the caption box. Oh well, though, if this is as good as it will get then it’s alright by me.