Reply To: Thumbnail images with expanded view

[Atelierbram]

You can see the effect if you swap the position of the first image with any of the other two, part of it will be visible when you click on the other thumbnails.

This is because the first image is visible by default, otherwise there would have been just an empty space there. You could have solved it like this:

#pre1,
#one:focus ~ #pre1{
  display:inline-block;
}
#two:focus ~ #pre1,
#three:focus ~ #pre1 {
  display: none;
}

But maybe you want to go with background-images now anyway.

My temporary solution is to add alt = "no-image" attribute to img tag to let viewer know that the image does not exist

If there would always be an alt attribute with a value of “no-image” on broken images, then additional one could do:

.thumb[alt*="no-image"] {
  display: none; 
}

But better would be if this could be solved on a template level, so broken images aren’t generated at all.