How can I hover image on top of another

HTML & CSS
1

How can I add image on top of the other I cant make the list image as background as it generic by php i just want to add a play button on top of the images when hover

this is my list of images

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

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

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;
}
2

use a pseudo element.

this should do it :


#list_profile li a{display:block; position relative;}
#list_profile li a:hover:before {
    content: url("/images/galleryhover.png") ;
   position:absolute;
   left:50% ;
 right: 50% ; 
 margin-top:    -111px;
 margin-left: -106px;
z-index:15;
}
3

Hi it does not work basically i want the same effect as this one when hover the image another show on top

http://www.madescoescorts.com/escorts/male/

4

typos, sorry about that:

#list_profile li a:hover:before {
content: url(“/images/galleryhover.png”) ;
position:absolute;
left:50% ;
top: 50% ;
margin-top: -111px;
margin-left: -106px;
z-index:15;
}

5

Hi it is now displaying the image but the hover image just show on top pf the page in the same position instead of displaying on top of the hover image

this is how its showing

http://madescomodels.eurico.co.uk/male/

6

did you remember to give the link display:block and position relative???

#list_profile li a{display:block; position relative;}

7

yes

this is how the whole css looks like now


#list_profile li img { width:212px; height:222px; margin-bottom:10px;}
#list_profile li a{display:block; position relative;}
#list_profile li a:hover:before {
content: url("/wp-content/themes/madescomodels/images/galleryhover.png") ;
position:absolute;
left:50% ;
top: 50% ;
margin-top: -111px;
margin-left: -106px;
z-index:15;
}
8

#list_profile li a{display:block; position:relative;}

also, since you have the margin on your image… you MAY or MAYNOT want to change
margin-top: -111px; to margin-top: -116px;

9

Thank you very much @dresden_phoenix its working now thank you thank you