I got an issue while hovering an image. i need to overlap the image with bottom section.
heres the link
If you remove the "border" off your li-tag and put it on your add_product.hover_visible then add some css to it perhaps something like this? Hope this will point you the right way:
position: absolute; left: 0; top: 0; display: block; border: 1px solid red; /*This would be your shadow box effect*/ height: 350px; /* Probably set a different height here that works better */ margin-top: 0; /* This was just to remove a CSS rule you had */
It requires your li (or any close parent to this tag) to be
position: relative; but when i entered these rules into your page it seemed to get an effect that was half way there to what you want I think. Good luck!