CSS Transition - Not working

Question

I've been reading few posts to my problem and still can't find the error I'm doing. Im trying to use a lightbox which also features a transition of its background (and if possible of the box itself). What it does: OnClick Button -> Background+Lightbox fades in. OnClick X Button -> Background+Lightbox fades out. But it doesn't work, as I can't see where the problem lies. So, what am I doing wrong?

I've created a jsfiddle session for anyone to "fiddle" with. JSFIDDLE

Search for this in the HTML(CSS is bascially only for the Lightbox):

<div id="light" class="white_content">This is of the Page is still under Development!</div>
<div id="fade" class="black_overlay">
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
        <img style="margin-top: 20px; margin-left: 20px; width: 40px;" alt="X Button" src="res/X.png" />
    </a>
</div>

You can call on the lightbox per "Products".

Answer 1

First of all, the element can't have display:none. If it is not visible, you wont be able to see the animation, nor the object at all.

In the JSFiddle, the css do not have any .black_over:hover part to describe the colorchange you want. Add something like .black_overlay:hover {color:red;} in the style sheet.

And one last thing: The "color" property will only set the color of the text inside the element. You either have to add some text inside the element, or edit the property to be something like background-color instead :)