Overlay Images using CSS

I want to introduce a section called quick tip as I have a lot that I can share which I encounter on a day to day basis.  The first  one that I will share is overlaid image using CSS.

Here it is there are 2 parts 1 is the CSS and 1 is the HTML where you apply ths CSS

CSS Code:

#OverlayImage1
{
	position: absolute;
	left: 20px;
	top: 20px;
	width: 56px;
	height: 45px;
	background: url(Angel.png) no-repeat top left;
	opacity: .80;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
}

#OverlayImage2
{
	position: absolute;
	left: 40px;
	top: 20px;
	width: 56px;
	height: 45px;
	background: url(Devil.png) no-repeat top left;
	opacity: .80;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
}

HTML Code:

<div id="OverlayImage1"></div>
<div id="OverlayImage2"></div>

In my example I have 2 images one is the devil and one is the angel and we want to place them together in an overlapping manner like this below

Overlaid

Originally they are two separate images and here is it as a reference

Angel

Devil