CODEWITHSUNDEEP
jqueryhtmlcss
gringoLoco007
gringoLoco007

Reputation: 849

How can I cover a div with a semi-transparent image?

I want to cover a <div> so it looks like it has a semi-transparent block over it.

I am using jQuery but I do not know how to do it.

Any help thanks...

Upvotes: 3

Views: 3390

Answers (2)

codedude
codedude

Reputation: 6519

You could use CSS3 to do this. Position a <div> absolutely on top of it and give the <div> a background of: rgba(255,255,255,.3).

Upvotes: 3

jAndy
jAndy

Reputation: 236022

If you have another div, you can just get the dimensions + position like

var $somediv = $('#some_div_element'),
    pos      = $.extend({
       width:    $somediv.outerWidth(),
       height:   $somediv.outerHeight()
    }, $somediv.position());

and then use it while dynamically creating an overlay

$('<div>', {
    id:    'overlay',
    css:   {
        position:         'absolute',
        top:              pos.top,
        left:             pos.left,
        width:            pos.width,
        height:           pos.height,
        backgroundColor:  '#000',
        opacity:          0.50
    }
}).appendTo($somediv);

Example: http://www.jsfiddle.net/GkFu4/1/

Upvotes: 10

Related Questions