CSS: наложение изображений - показывает дополнительную прозрачную строку

Question

Im, получая дополнительную очень мыслящую границу при наложении двух изображений. Страница содержит в основном изображения и статическую лупу. Часть исходного изображения отображается в лупу при зависании этого изображения с помощью javascript.

Лупа является PNG с прозрачным отверстием посередине:

magnifier

Проблема заключается в том, что им получать дополнительную прозрачную рамку вокруг черных линий Лупа в. Через эту тонкую границу, оригинальное изображение сияет. В качестве демонстрации я изменил изображение лупы на 20 пикселей по бокам и добавил черную рамку вокруг него. Это показывает, что прозрачная линия не появляется вокруг всего изображения, а внутри него.

transparent ghost border

Код следующее:

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

Любые идеи?

Answer 1

попробуйте этот .fullsize> IMG {граница: нет;}