Question

I’m a javascript newbie so please forgive me if this question is really basic. I’m having one problem with what I’m trying do to.

I have an image on a page.

I want to put a black box on top of the image (using CSS presumably) i.e. to conceal the image.

Then, using JavaScript, when the mouse moves over the black CSS box, the black box fades out revealing the image.

I know how to do the fade out using JavaScript, but I’m having trouble getting a CSS box on top of the image…

Thanks if you can help by telling me how to do this.

Note, in my efforts so far, I created a box using CSS and then added an image to the page, but the image just removed the CSS box.

Answer 1

I decided to add the black cover with JavaScript. This way, a JavaScript disabled user will still get to see your image.

HTML

<div id="container">
   <img src="path/to/your/image.png" alt="Hello" />
</div>

CSS

#container {
   position: relative;   
}

#container div {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: #000;
}

jQuery

$(function() {
    var container = $('#container'),
        div = $('<div />').appendTo(container);

    container.hover(function() {
        div.fadeOut(500);
    }, function() {
        div.fadeIn(500);
    });
});

jsFiddle.