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.

closed as off-topic by Michael Lai, ChrisF, Mayo, JohnGB Jul 29 '16 at 19:45

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Michael Lai, ChrisF, Mayo, JohnGB
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 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 '16 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 '16 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 '16 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 '16 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 '16 at 18:00

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.

  • +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 '16 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 '16 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 '16 at 18:59

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.


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

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