0

I have an image looks like satellite map where I want to put a close button at the top right corner. What I have now is just a span with "X".

It's an 100% overlay on a popup so clicking outside would close the popup where I only want to close the overlay.

But because the image itself can have any color, thus no matter what color I make the "X" to be, it's not always very visible to the user.

Is there any (CSS) tricks that can make the close button stand out? I've heard about box-shadow but not sure how it can help in this case.

Having a dedicated header to just hold the close button feels feels too much.

Improve this question
8
  • How about a semitransparent border of 3 to 5 pixels, and a semitransparent square with rounded corners in one corner of it?
    – jackiemb
    Jul 28, 2016 at 17:46
  • Instead of a dedicated header you could always have the X itself overhang to be more prominent like this: drupal.org/files/chrome_8.png
    – DasBeasto
    Jul 28, 2016 at 17:49
  • @DasBeasto Since the image overlay would take 100% of the original popup, it would be awkward to have something hanging outside of the popup only when the overly is opened
    – LoveProgramming
    Jul 28, 2016 at 17:51
  • @jackiemb Sorry I'm not entirely sure what you mean by that. Can I have some img or css snippet?
    – LoveProgramming
    Jul 28, 2016 at 17:54
  • @LoveProgramming Oh I see what you mean I misread the original, you're correct that would be awkward. Also I assume jackie means something like this: jsfiddle.net/1fo6rzk8
    – DasBeasto
    Jul 28, 2016 at 18:00

3 Answers 3

Reset to default
2

enter image description here

enter image description here

The border gives the overlay coherence of design. Putting the X on a background like the circular one here means that it will always show up. If you make it semitransparent then you maximise the amount you can see underneath, if what's underneath is important.

Improve this answer
3
  • +1 exactly. The white background will contrast dark colors and the black X will contrast light colors so no matter what it is overlaying it will always be seen.
    – DasBeasto
    Jul 28, 2016 at 18:40
  • This lookd great! Would it look good without the semi-transparent border around the image? Since there is a potential side panel at the left side of the image..
    – LoveProgramming
    Jul 28, 2016 at 18:42
  • Glad to be of service. It would still look ok without the border but it would look less 'designed'. The border helps the eye to separate back and foreground. In conjunction with the x background it draws the eye around the image and toward the x
    – jackiemb
    Jul 28, 2016 at 18:59
0

One standard trick photographers use for watermarks is to take the image of the watermark and invert the colour, shift down and to the side by a couple of pixels and then combine so if you put an X on a transparent, or translucent, but bordered box and perform the same trick it will show on any background.

Improve this answer
0

Use Google Maps' inspiration: have a colored background and a white X. And once the users mouse hover over it, it shows some shadow.

enter image description here

enter image description here

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.