In an answer, I tried to use the spoiler markdown to hide an image. (It wasn't offensive, but it was unappetizing which seems worthy of hiding on Seasoned Advice.) But the image seems not to be hidden even if the text is. Here's an example:

This line is hidden... Spoiler Warning! ...this image isn't! (This line added to show the problem is not a special case of this question.)

(Oh. Link descriptions aren't hidden either, it seems.)

Why is this?

In case this is browser-specific, I'm using Chrome.

  • Or maybe link descriptions aren't hidden in the preview. I don't see the problem with that now that the question is published. So just the image problem then. Commented Oct 28, 2011 at 21:49
  • 1
    The image was stolen from the Spoiler Warning Let's Play video series, in case you were wondering. Commented Oct 28, 2011 at 21:56
  • While still hoping for a proper fix from the SE folks, I've included a client-side fix for this (and a bunch of other spoiler CSS issues) in SOUP v1.6. Commented Feb 10, 2014 at 14:06
  • 1
    I wonder why it works on Arqade, but not here.
    – 3ventic
    Commented Mar 11, 2014 at 20:25
  • 1
    This seems to be fixed here and on Seasoned Advice, but it's still broken on SO. Commented May 10, 2014 at 23:06

3 Answers 3


This was fixed a while back, more or less as suggested by Ilmari Karonen, but with the addition of a bit of script to strip the "spoiler" class entirely upon clicking within the spoiler (and to restore it upon clicking again). This allows you to choose whether to briefly view the content (hover) or leave it visible indefinitely (and also works a bit better on mobile devices than the previous system).

  • Ah. Much nicer. Thank you. Commented Oct 28, 2011 at 21:57
  • That does look much nicer ;-)
    – Shog9
    Commented Oct 28, 2011 at 22:03
  • Since the behavior doesn't match the user's expectation, I'd still cause this a bug even now that I understand what happened. But the fix is probably a sentence or two in the documentation. Perhaps just the middle paragraph of this answer would suffice. Commented Oct 28, 2011 at 23:04
  • Well, it does say "To hide a certain piece of text..." But yeah, I'll keep this in mind for the future - I'd kinda like to see the documentation be a bit more prescriptive about how/when the tag should be used as well.
    – Shog9
    Commented Oct 28, 2011 at 23:31
  • 1
    Ahhh! You scarred me for life! I am going to cry now. Remind me to -1 you once I finish. Commented Oct 28, 2011 at 23:53
  • I have no problem selecting text on the (nice!) spoiler implementation on the mobile theme.
    – Arjan
    Commented Jul 6, 2012 at 4:57
  • If they are collapsible then this would solve both the image and touchscreen problems
    – bobobobo
    Commented Sep 24, 2012 at 18:07

The "why" is because the spoiler effect is to just set the foreground text color to the same as the background color, which doesn't help with images. I'm not sure why they did that instead of something like visibility: hidden; possibly so the grey box is still visible to indicate that spoiler text is available, but I would think there are other ways of marking that. Alternatively, there would need to be a special style for img.spoiler that hides images as well

  • I asked about this once upon a time and balpha said that although he couldn't remember what it was, there was some reason why visibility: hidden would have caused some issues.
    – Tim Stone
    Commented Oct 28, 2011 at 22:28

For the record, there is a better implementation that hides everything and enables copy&paste: use the opacity style element.


<!DOCTYPE html>
    <title>Spoiler Test</title>
    <style type="text/css">
      blockquote.spoiler {
        background-color : rgb(238,238,238);
        padding : 10pt 10pt 1pt 10pt;
      blockquote.spoiler * {
        opacity : 0;
      blockquote.spoiler:hover * {
        opacity : 1;
    Before spoiler.
    <blockquote class="spoiler">
      <p>Before image</p>
      <img alt="So hidden image!" src="https://i.sstatic.net/XjNFy.jpg"/>
      <p>After image.</p>
    After spoiler.

Don't know about touch devices, though; selected text remains selected when the pointer leaves the spoiler area, but it is no longer shown. I guess you could write a simple user script that "fixes" blockquotes for devices that don't emulate pointers.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .