0

Im getting extra very think border when overlaping two images. The page contains mostly images and static magnifier. Part of original image shows in the magnifier when hovering this image using javascript.

Magnifier is a PNG with transparent hole in the middle:

magnifier

The problem is that im getting extra transparent border around magnifier's black lines. Through this thin border, the original image shines through. As a demonstation, i resized the magnifier image with 20px each side and added black border around it. It shows that the transparent line does not appear around the whole image, but inside it.

transparent ghost border

The code is 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?

Lakusqo
  • 9
  • 2

1 Answers1

-1

try this .fullsize > img{ border:none;}

SoPhat Vathana
  • 80
  • 1
  • 7