How can I hover image on top of another

[Lisa23]

Hi I've been trying to hover an image on top of another but it doesnt work because the hover is background so it seems like it display under the images is there a way to make show on the top of the images i want to show a small play button in the middle of the image any idea how i can do it

 

this is my list of images

<ul id="list_profile">
    <li class="">
        <a href="#/"><img width="440" height="450" alt="img4" src="/uploads/img4.jpg"></a>
    </li>
    
    <li class="">
        <a href="#/"><img width="440" height="450" alt="img3" src="/uploads/img3.jpg"></a>
    </li>
</ul>

The css

#list_profile li img { width:212px; height:222px; margin-bottom:10px; z-index:-1;}

#list_profile li img:hover {
    background: url("/images/galleryhover.png") no-repeat scroll left top transparent ;
    height: 222px;
    width: 212px;
	z-index:999;
}

Edited April 11, 2013 by Lisa23

[BuildMyWeb]

what about making use of CSS sprites?  have your image (i assume a stillshot of a video) and then underneath that, the same stillshot with a play button layered over it.  when viewer hovers over your stillshot, css replaces it with the playbutton version