simple image overlay

[Destramic]

hey guys im trying to impliment a overlay to images uploaded by the user to allow to delete and crop...now im not sure if im going aroung this the right way (but it works sort of)...the problem im having is that the overlay.gif which is a transparent image which has 2 small images at the top of each corner...but when the original image is hovered over the overlay is out of position showing the 2 small images at the bottom of the div and not at the top where it should be.

 

im guessing it is a css issue...any advise would be greatly appreciated...thank you

#overlay
{
	width: 110px;
	height: 110px;	
}
.selected-image{
	width: 110px;
	height: 110px;
}
#overlay:hover  .selected-image  
{ 
opacity: 0.4;
    filter: alpha(opacity=40);	
}

#overlay:hover
{

	background-image: url('overlay.gif');
	width: 110px;
	height: 110px;
	
}

<div id="overlay"><img class="selected-image" src="logo.png" /></div>

[Destramic]

i managed to get the positoning right although im still having a few css issues if someone could please help

 

if you view here http://139546017.reseller20.grserver.gr/test.html

 

1. basically when the image is hovered over it goes transparent then the overlay goes over the top of that....but for some reason the overlay is also transparent which i dont want.

2. also i put two divs inside the overlay div called left and right...what im trying to do is make the cropped image icon and the delete icon on the overlay as a active link

 

advise or any help would be great thank you

[BuildMyWeb]

children inherit opacity from their predecessors.

 

rather than using opacity on the parent element, try rgba: http://www.css3.info/preview/rgba/

 

otherwise you can position the overlay from outside the original element