html - CSS: overlaping images - showing extra transparent line -

im getting think border when overlaping 2 images. page contains images , static magnifier. part of original image shows in magnifier when hovering image using javascript.

magnifier png transparent hole in middle:

magnifier

the problem im getting transparent border around magnifier's black lines. through thin border, original image shines through. demonstation, resized magnifier image 20px each side , added black border around it. shows transparent line not appear around whole image, inside it.

transparent ghost border

the code following:

html:

<div id="left-image-block">   <div id="magnifier_wrap">     <div class="fullsize" style="display: inline; left: 0px; top: 0px;">       <img src="/path/to/image.jpg" width="250" style="display: inline;" />     </div>     <div class="magnifier" style="border: 1px solid black;">       <img src="/path/to/magnifier.png" />     </div>   </div> </div> 

css:

#magnifier_wrap { position: relative; width: 250px; height: 292px; overflow: hidden; z-index: 100; } #magnifier_wrap .magnifier { position: absolute; left: 0; top: 0; } #magnifier_wrap .fullsize { display: none; position: absolute; } 

any ideas?

try .fullsize > img{ border:none;}