0

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?

MR.GEWA
  • 833
  • 1
  • 15
  • 37
  • Just so you know, the back ground color is not being applied as you suggest. Found because i can firebug it and undo the body bgcolor and the problem effect still maintains. – SpYk3HH Feb 10 '12 at 19:41
  • There is a javascript error on the page. Try fixing it first and maybe that will fix it – Henesnarfel Feb 10 '12 at 19:42
  • Upon further review, I feel regret in haivng to tell you, you can't do what you are trying to do in this manner. U have to be able to set the images position to absolute in order to "truly" have their transparencies overlap, otherwise, the boxes they are contained in is still going to overlap whatever is behind it. Of course this might be bypassable in background transparent, however, i've yet to be able to produce such effect. Only when i change specific elements positions in absolute and relative was i able to get the images to overlap with transparency. but again, thats just firebugging – SpYk3HH Feb 10 '12 at 19:44

2 Answers2

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;
}
Community
  • 1
  • 1
Jasper
  • 75,717
  • 14
  • 151
  • 146
  • it seams your code helped me to overcome the transparency problem... But something makes me feel the moving mechanism of images is somehow weird... – MR.GEWA Feb 10 '12 at 19:52
  • Yup I feel the same way. I would make my own script since it's not too much code for what you want. On mouse-enter, slide the other two images where they need to go and fade them out, then on mouse-out, slide all the images to the default location and fade them back in. Fading-out the non-active images I believe will make the user-interaction much smoother feeling. – Jasper Feb 10 '12 at 20:00
  • I wish I would have some time to do it :)))) thanks anyway Jusper! – MR.GEWA Feb 10 '12 at 21:21
0

Can't you add 

background: transparent;

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

ayottepl
  • 46
  • 4