How to overlap one image over another?

Question

in my application I am displaying thumbnails of user album's images.What I want to do is to display a delete image button over the right corner of the album image.When user clicks on the delete image it will pass the image id and delete the image info from database.My problem is how to overlap delete image on the album image? delete image is a small 30*30 gif image. I am generating image blocks dynamicaly -

<div id="main">

<?php require 'getPhotos.php'; ?>
</div>

getPhotos.php-

...
if ($result) {

echo "<ul id='photos'> \n";

while ($row = $result->fetch_object()) {

    $title = $row->title;
    $src = $row->src;
    $id = $row->id;

    echo "<li><a href='images/$src'><img src='images/$src' width='90%' height='60%' id='$id' alt='$title' /></a> \n";
    echo "<h4>$title</h4> \n";
    echo "<input type='text' name='title' value='$title' /></li> \n \n";
    }   

    echo "</ul>";   

}
...

Answer 1

You can overlap/overlay images on top of each other using css and divs.

Here is an article explaining what you would need to do.

http://chadcarr.com/blog/simple-overlay-image-captions-css/