How to place an image over a transparent image in CSS

I have just spent a very long time on this again, and finally, after endless googling that went on for hours, I discovered a solution that actually works.

The only 2 “special” techniques this solution uses are z-index and absolute positioning:

HTML code:

XML

<!--

The first image has a folder icon - the file tnFolder.png is transparent (except for the yellow folder, of course) and is 150x84 in size. -->
<div>
    <img alt="Image 1" class="tnFile" src="http://blog.sunamo.cz/i/Kocicky/1/Kocicka/Kocicka1/P1020033.jpg">
    <div>
        <a href="Photo.aspx?pid=1">
            <img alt="t" src="http://blog.sunamo.cz/i/tnFolder.png">
        </a>
    </div>
    <div>Description of image 1</div>
</div>
<!-- The second image has no folder icon, so I leave out the absolutely positioned div -->
<div>
    <a href="Photo.aspx?pid=1">
        <img alt="Image 2" class="tnFile" src="http://blog.sunamo.cz/i/Kocicky/1/Kocicka/Kocicka1/P1020038.jpg">
    </a>
    <div>Description of image 2</div>
</div>

CSS code:

CSS

.tnBox
{
    position: relative;
    display: inline-block;
    vertical-align: top;

}
.tnFile
{
    /*width and height are only needed if your images are not all the same size and/or are larger than you want*/
    width: 150px;
    height: 84px;
    z-index: 1;

}
.tnFolder
{
    position: absolute; top: 0; left: 0; z-index: 2;

}
.tnDesc
{
    width: 150px;
    max-width: 150px;
    font-size:smaller;
    padding: 0;
    padding-bottom: 10px;
    text-align: center;

}

Enjoy!

Leave a Reply Cancel reply