Question

I’m using a userstylesheet to modify webpages in that I’m moving all the images to the far right. It’s working and all except on reddit where I also use RES‘s drag-zoom and a few other sites where things get a bit messy : https://i.stack.imgur.com/nJUyK.png

So I was wondering if I could just click an image to “bring it up” from that dense mess of images. Is it possible in CSS (as I’m only using CSS userstylesheets) but I’m open to any alternatives.

Answer 1

You could do it using restyled checkboxes / radiobuttons
(Source: http://www.inserthtml.com/2012/04/css-click-states/)

Throw the image to-be-shown and a checkbox (style it as you want) into a container

<form class="clickable"> 
  <label for="the-checkbox">Click Me!</label>
  <!-- Radiobuttons should do it, too! -->
  <input type="checkbox" id="the-checkbox" /> 
  <!-- This is the div we want to appear and disappear -->
  <div class="appear">Some text(image to appear</div>
</form>

Now you can toggle the visibility (or the z-Index in your case) of the image using the :checked pseudoselector.

.clickable .appear { 
  display: none;
}

.clickable input:checked ~ .appear {
  /* Or change the z-Index here */
  display: block;
}

Check out “A Quick Demo” at the bottom of the article linked above.
Using id’s instead of classed or tag names as CSS selector is possible, too.
So it shouldn’t be a problem to toggle several images.
And using radio buttons has the charm, that the last selected button gets unselected when you click the next one (Untested, just an idea ;).