CSS: Überlappende Bilder - zeigt zusätzliche transparente Linie

Question

Ich bekomme extra sehr denken Rand, wenn zwei Bilder überlagert. Die Seite enthält hauptsächlich Bilder und statische Lupe. Ein Teil des Originalbildes wird in der Lupe angezeigt, wenn Sie dieses Bild mit Javascript bewegen.

Magnifier ist ein PNG mit transparentem Loch in der Mitte:

magnifier

Das Problem ist, dass im zusätzlichen transparenten Rande der schwarzen Linien um Lupe zu bekommen. Durch diese dünne Grenze scheint das Originalbild durch. Zur Demonstration habe ich das Vergrößerungsbild mit 20px auf jeder Seite skaliert und einen schwarzen Rand darum gelegt. Es zeigt, dass die transparente Linie nicht um das gesamte Bild herum, sondern innerhalb des Bildes erscheint.

transparent ghost border

Der Code folgt:

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

Irgendwelche Ideen?

Answer 1

versuchen, diesen .fullsize> img {border: none;}