Keeping png transperancy using a jQuery Lights Out effect

Question

On my page I have implemented a basic lights out effect from this source here: http://www.emanueleferonato.com/stuff/lightsoff/

I would like a PNG image to be the button that 'switches the lights on' however the image has a persistent white box from the div it's in. Is it possible for just the PNG image to sit above the black layer in the lights out effect?

My test is at this url: http://www.voyagedesign.net/illuminatetests/logolightsout.html

Thank you for your response.

Answer 1

The problem stems from this CSS:

* {
   margin: 0;
   font-family: sans-serif;
   background-color: #F6F6F4;
}

Either remove that background-color attribute or override it:

#logo > img {
    background-color: initial;
}

or:

#logo > img {
    background-color: transparent;
    background-color: rgba(0,0,0,0);
}

Should do the trick.

Answer 2

Got another solution for you.

What i did is created a round div and placed your logo image as background. This seems to do the job.

EXAMPLE

HTML

<div id="logo"></div>

CSS

#logo {
    margin: 0 auto;
    height:130px;
    width:130px;
    -moz-border-radius:130px;
    -webkit-border-radius:130px;
    padding:35px;
    text-align:center;
    color:white;
    background-image: url(http://www.voyagedesign.net/illuminatetests/BMW_logo.png);
    position:relative;
    z-index:50;
}

Hope this helps