Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can find a demo <a href="http://jsfiddle.net/nazmul2011/q4cLM/" rel="nofollow">here</a></p> <p>If your Browser does not support CSS3 features, you can try this. I used two DIV, one for content and another for glass effect. I made both of their position absolute. In addition to that z-index has been used to display div one above another.</p> <p>Copy the code and try it in your browser.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Glass Effect&lt;/title&gt; &lt;style type="text/css"&gt; body{ background-color:#AA3333; } div#content{ position:absolute; z-index:99; top:100px; left:100px; width:400px; height:300px; } div#glass{ position:absolute; z-index:100; top:100px; left:100px; background-color:#777777; opacity:0.20; filter:alpha(opacity=20); width:400px; height:300px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="content"&gt; &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum&lt;/p&gt; &lt;/div&gt; &lt;div id="glass"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload