Question

How can I make a specific div with transparent background-color over a div with black background-color?

Thanks.

I have tried to make it work with adding another div with transparent but no luck, my code as below

.a {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}

.b {
    opacity: 0.7;
    background-color: #000;
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
}

.c {
    opacity: 1;
    position: absolute;
    top: 120px;
    left: 170px;
    width: 100px;
    height: 30px;
    background-color: transparent;
}​

<div class="a"><img src="http://www.helpinghomelesscats.com/images/cat1.jpg" /></div>
<div class="b"></div>
<div class="c"></div>

http://jsfiddle.net/sJW6U/1/

BEFORE

AFTER

Answer 1

The problem here is even if you do this you’re just going to see your semi-black div behind your transparent one, it’s not going to “cut out” the div below it.

What about this?

.a {
    width: 300px;
    height: 300px;
    position: absolute;
    cursor: none;
    top: 0;
    left: 0;
    /*overflow hidden to contain box shadow*/
    overflow: hidden;
}

.b {
    position: absolute;
    /*using box-shadow to create background*/
    -webkit-box-shadow: 0 0 0 50000px rgba(0,0,0,0.7);
    box-shadow: 0 0 0 50000px rgba(0,0,0,0.7);
    /*change height and position as needed*/
    width: 50px;
    height: 50px;
    top: 45px;
    left: 75px;
    z-index: 10;
}​

Markup will have to change to the following:

 <div class="a">
    <img src="http://www.helpinghomelesscats.com/images/cat1.jpg" />
    <div class="b"></div>
</div>

http://jsfiddle.net/sJW6U/71/

Hope this helps.

Bonus: use something like this to attach .b to the mouse:

$(document).on('mousemove', function(e){
    $('.b').css({
       left:  e.pageX -25,
       top:   e.pageY -25
    });
});