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?

3
  • 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, 2012 at 19:41
  • There is a javascript error on the page. Try fixing it first and maybe that will fix it Feb 10, 2012 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, 2012 at 19:44

2 Answers 2

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;
}
3
  • 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, 2012 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, 2012 at 20:00
  • I wish I would have some time to do it :)))) thanks anyway Jusper!
    – MR.GEWA
    Feb 10, 2012 at 21:21
0

Can't you add

background: transparent;

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

3
  • it;s not helping as you can see
    – MR.GEWA
    Feb 10, 2012 at 19:43
  • it is to remove the white background on hover bottles inside the popup, but i'm not sure you were asking for this.
    – ayottepl
    Feb 10, 2012 at 19:44
  • sure i clicked on the bottles sry ;)
    – ayottepl
    Feb 10, 2012 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.