Description
This Tip/Trick shows how to show an image over another image. Using the properties
position, left, top, z-index, you can achieve that.
Code
<html>
<head>
<title>Show Image over image</title>
<style type="text/css">
img { position:absolute; top: 25px; z-index: 2;}
.imgA1 { left: 0px; }
.imgB1 { left: 0px; }
.imgB2 { left: 15px; }
.imgB3 { left: 30px; }
.imgB4 { left: 45px; }
.imgB5 { left: 60px; }
.imgB6 { left: 75px; }
.imgB7 { left: 90px; }
.imgB8 { left: 105px; }
.imgB9 { left: 120px; }
</style>
</head>
<body>
<img src="http://www.codeproject.com/Info/images/codeproject125x125.gif" style="z-index: 1;" class="imgA1"/>
<img src="line.gif" class="imgB1" />
<img src="line.gif" class="imgB2" />
<img src="line.gif" class="imgB3" />
<img src="line.gif" class="imgB4" />
<img src="line.gif" class="imgB5" />
<img src="line.gif" class="imgB6" />
<img src="line.gif" class="imgB7" />
<img src="line.gif" class="imgB8" />
<img src="line.gif" class="imgB9" />
</body>
</html>
Browser Compatibility
I have tested this script in the following Web browsers:
- Internet Explorer
- Mozilla Firefox
- Google Chrome
- Safari
- Opera
Result
This sample code will show you our Bob :bob: in Prison.
