create an overlay on top of an image

recently, while I am editing my web page of project description, I was thinking of creating an overlay on top of the image. It is a feature commonly seen in web pages nowadays.


lets say, we have one outer div, two overlay div, and one image. The overlay divs are smaller and contained in the outer div.

<div class="outer">
<img src="some.png" alt="image" />
<div class="overlay" id="overlay1">This is an overlay1</div>
<div class="overlay" id="overlay2">This is an overlay2</div>
</div>


then set the CSS as:

div.outer
{
width: 570px;
height: 420px;
position: relative;
float: left;
}

div.overlay
{
position: absolute;
opacity: 0.5;
background-color: green;
}

#overlay1
{
left: 20px;
top: 20px;
width: 100px;
height: 40px;
}

#overlay2
{
left: 150px;
top: 100px;
width: 80px;
height: 30px;
}

the most important thing, is the overlay div "position: absolute" and the outer div "position: relative".