slider transparent .png images background fix

Question

I have one of our projects very strange problem

here on

http://konyak.georates.net/page-2/

we have a so called images-menu made via Kwicks script . The problem is that we made images in .png format and partly transparent,so that when they will slide one over another, the bottle from down will be nicly visible over another via those transparent part. But the script Kwicks somehow takes the pages body background color and fill the images transparent part with that color... How to fix that? could you hint out?

Answer 1

You need to remove the overflow:hidden property applied to the <li> elements that are ancestors of your bottle images:

ul#accordion-slider li {
    display : block;
    /*overflow: hidden;*/
    padding : 80px 0 0 0;
    float   : left;
    width   : 60px;
    height  : 350px;
}

I made this change in my Developer Tools and the bottles overlap each-other seamlessly, without the vertical lines in-between them.

Update

It seems that a script on your webpage re-adds the overflow : hidden CSS every-time you mouse-over one of the images. You can stop this by adding !important to a css rule that states overflow : visible:

ul#accordion-slider li {
    display  : block;
    overflow : visible;
    padding  : 80px 0 0 0;
    float    : left;
    width    : 60px;
    height   : 350px;
}

Answer 2

Can't you add

background: transparent;

on your IMG inside the popup? It removes the white background.