Opacity is making div lighter not transparent

Question

I would like to make the DIV that appears on hover transparent so the image below it shows through slightly, but instead it is only getting lighter. I have another page with similar functionality, where the DIV slides in horizontally instead of from the bottom; this page has successful transparency. For some reason, the code is not translating.

Here's what I have so far: http://jsfiddle.net/tGEZb/

I've tried rgba instead of the code I have here with no luck, and also searched through the posts here but can't find anything that addresses this exact issue..not sure what else to try. I'm sure it's something obvious that is hiding from me from staring at the code for too long but hopefully someone can help.

I would like to avoid using CSS3 if possible and also maintain the smooth functionality of the slider now (rather than having something that toggles).

Disclaimer: I copied and pasted the JavaScript from a post I found online - unfortunately that is the extent of my JS abilities.

Thanks in advance for any help.

Answer 1

You're hiding the image by setting its parent's height to 0. There is nothing for the div to see-through to, so the white background make's it lighter.

Try moving the bottom div instead. http://jsfiddle.net/tGEZb/6/

$(document).ready(function(){
    $('.espot-up-down').mouseover(function(){
        $('.espot-slide-onhover').stop().animate({
            top: -230
        }, 150);                        
    }).mouseout(function(){
        $('.espot-slide-onhover').stop().animate({
            top: 0
        }, 250)    
    })

});​

.espot-up-down needs position: relative;