So. A while back I shared a method for creating dropdown/hover menus, and taking inspiration from the menu wroth would have in his journals, I devised a way to include thumbs within the menus too.


...problem was though, you needed to have Firefox 3 for it to work right (should work in other modern browsers too), and now, here we are, in all our display: inline-block glory

inline-block is awesome because it lets us create elements that behave like blocks, and like inline elements. In other words, we can control their width/height and padding in all directions, and we can align them using the normal text-align values - pretty much how images act, so no more having to use awkward floats.

The next cool thing going on is that no extra HTML is required - aside from a wrapping div all you have to do is throw :thumbs###: at it. I wont go into too much detail, but in short, whenever you paste in a thumb code, deviantart will replace that with a bunch of HTML, and by hijacking some of this HTML, we can create the effect you see above without any extra HTML.

Das HTML:
<div class="minigal">
  :thumb####: :thumb####: :thumb####: :thumb####: ...etc
</div>

Das CSS:
.minigal{margin: 0 55px 55px 55px}
.minigal .shadow{background-image: none!important}
.minigal a{
  display: inline-block;
  width: 50px!important;
  height: 50px!important;
  overflow: hidden;
  border: solid #fff;
  background: #fff;
  border-width: 10px 5px 5px 5px;
  outline: 1px solid #ccc
}
.minigal img{margin:-20px -50px;max-width:none!important;}

.minigal a:hover{
  border-color: #000!important;
  outline: 1px solid transparent!important
}
.minigal a:hover img{
  z-index: 999;
  position: absolute;
  margin: 0 0 0 -30px;
  border: 10px solid #000
}

Das Customisation
The first line, .minigal{margin: 0 55px 55px 55px} gives the block of thumbs enough space around them so that the thumbs don't pop out of the journal. You might be able to get away with removing this line, just check first.

The colour values throughout the code can be changed to anything you like (so long as it's tasteful ) but just note that the last two blacks (#000) are the hover colour for the thumbs, normally these should be the same colour, but you could try playing around with different combinations.



Finally, margin: 0 0 0 -30px; in .minigal a:hover img{...} at the end there is to shift the big/normal thumb back to be flush with the left side of the small thumb. Make the value bigger to bring it back further if you like:



Hopefully by now you've noticed why there's that extra space above the mini-thumbs, making them look almost like upside-down polaroids - it's so that you can move to the next thumb! Without it, the next thumb would often be covered, and you'd only be able to move to the second next thumb.





One variant I've seen floating around, and I've forgotten where I first saw it (though I will update this when I remember it was ahedrick201! ) adjusts the thumb size an the hovered position in such a way that it works just fine without the top tab. If you're going to drop the border and top tab, this would be the way to do it right:



The CSS for this version is as follows:
.minigal .shadow {
  background-image:none!important;
}
.minigal a {
  display:inline-block;
  width:63px!important;
  height:63px!important;
  line-height:63px;
  overflow:hidden;
  position:relative;
  z-index:1;
}
.minigal a img {
  position:absolute;
  top:-10px;
  left:-20px;
}
.minigal a:hover {
  overflow:visible;
  z-index:99;
  border:none;
}


Das caveats
Doesn't play nice with certain kinds of thumbs like some pixel art (emotes particularly), Lit (untested actually, but Lit would be ill-suited anyhow) and tall narrow thumbs like tutorials.