Overlapping a DIV with another and adjusting its Opacity

While working with HTML in web designing, sometime we need to overlap a div with another. Those who do it for the very first time find it difficult to do that. Here i have provided a simple example to make it easier for you to do it.

The following code will overlap an existing DIV (with an image). There will be 9 different DIVs overlapping that image at different locations. Opacity of these DIVs can also be changed using a simple function. Check the live version of that code in running condition and then its code provided below.

Running Version:




Code:

<div style="position:relative;width:200px;height:200px;float:left;">
     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCKSLSlV_MN1oKe4ArWJWi0ICvnAYert1_eNJ4TumG5hfniIxWAjqU_2c7nDrH2lesLwnl-soaITe1LCJo_M-KQwMm2-js_xZyJGpdNYj_MCk9dDoc_d9die3kR4tP9mEUJwYOFlxQtz-B/s1600/c1.jpg" />
     <div id="div1" style="position:absolute;opacity:0.9;top:0;left:0;width:66px;height:66px;background-color:red"></div>
     <div id="div2" style="position:absolute;opacity:0.9;top:0;left:66px;width:66px;height:66px;background-color:green"></div>
     <div id="div3" style="position:absolute;opacity:0.9;top:0;left:132px;width:66px;height:66px;background-color:blue"></div>
     <div id="div4" style="position:absolute;opacity:0.9;top:66px;left:0px;width:66px;height:66px;background-color:yellow"></div>
     <div id="div5" style="position:absolute;opacity:0.9;top:66px;left:66px;width:66px;height:66px;background-color:pink"></div>
     <div id="div6" style="position:absolute;opacity:0.9;top:66px;left:132px;width:66px;height:66px;background-color:orange"></div>
     <div id="div7" style="position:absolute;opacity:0.9;top:132px;left:0px;width:66px;height:66px;background-color:purple"></div>
     <div id="div8" style="position:absolute;opacity:0.9;top:132px;left:66px;width:66px;height:66px;background-color:violet"></div>
     <div id="div9" style="position:absolute;opacity:0.9;top:132px;left:132px;width:66px;height:66px;background-color:indigo"></div>
</div>
<input type="button" value="Remove Red" onclick="remove()" />
<script>
function remove()
{
document.getElementById('div1').style.opacity=0;
}
</script>
Share this Article :
Email

No comments:

Post a Comment