Deviant Login Shop  Join deviantART for FREE Take the Tour

:iconthespook: More from thespook

More from deviantART


Submitted on
May 27, 2010


2,764 (1 today)
27 (who?)

Journal CSS: Mini-thumbs

Journal Entry: Thu May 27, 2010, 6:06 PM
update on August 16, 2013: The CSS shown below stopped working a long time ago, but I have got it working again. I haven't update the tutorial just yet, but you can steal the CSS from the test journal -… - if you know how :)

DELETED SCENES 6 - Hal 9000 by graffd02 Hellboy by GabeFarber Leadenhall Street Market by Jez92 Girona II by Jez92 Snowdon I by Jez92 Free Your Mind by Fenderbabe16 Change by the Time by hilmanfajar octopus 2 by automaticsourpopcorn "FREE"REWORKED by bmessina :thumb78711461: my CITY by nichangell Balance by quasilucid galaxy quest 1,01 by iliaskrzs Okami-Wallpaper size by ashiong Floralcosm III - tone by wroth :thumb79984382: Beach mecha by agnidevi Bird Shit, Rust and Paint by tExTuReMaTtIc the doctor is in by NickTassone Cheap Labor by avotius Entanglement. by jack22 Tony The Astronaut by Karelias PF Blanka by UdonCrew Remake Propaganda by Alcove Spectacle by s9 pepper pilot by spx

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 :D

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.

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

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 ;p) 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.

Heartbreaking Normalcy. by jack22 Hellboy by GabeFarber Leadenhall Street Market by Jez92 Girona II by Jez92

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:

Tony The Astronaut by Karelias PF Blanka by UdonCrew Remake Propaganda by Alcove Spectacle by s9

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.

Lately I've noticed a lot of people removing that little tab above the thumbs. While that's up to them to decide, and I'll admit it makes them look all pretty in a grid... as a visitor, as a user, it bugs the heck out of me.

This is actually how I originally designed the mini-thumbs to behave, but I found it annoying as hell to use. It was hard to move to the next thumb, and generally it felt unintuitive, almost like I had to fight with it.

Really it's up to you, I'm not going to force people to do it 'my' way, but before you go and annoy me, play around with the grid below and see how it feels. :)

Heartbreaking Normalcy. by jack22 Hellboy by GabeFarber
Leadenhall Street Market by Jez92 Girona II by Jez92 Snowdon I by Jez92
Free Your Mind by Fenderbabe16 Change by the Time by hilmanfajar octopus 2 by automaticsourpopcorn

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:

18216 by The-Definition Temptation by akyra
Fence in snow by Jez92 Heart Wire by VexingArt From Beneath You by kuschelirmel
5278 by shesaghost chainsaw maid fanart by poisondlo The Ocean I Know by lisawang
Pilcrow by netnessie Brackets by netnessie

The CSS for this version is as follows:
.minigal .shadow {
.minigal a {
.minigal a img {
.minigal a:hover {

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.

Enjoy - and if you have any questions or requests, drop a comment below, eh? :thumbsup:

  • Mood: Happy
Add a Comment:
live-inspired Nov 28, 2013  Student Digital Artist
Copied the text provided for the example by ahedrick... however, on hover, it allows the image to get larger vertically, but remains the same width. So if you hover the thumbnail gets taller, but not proportionately wider.
You haven't given me enough information to help you. I tried looking up ~ahedrick, but their profile is empty. I checked your journals for a thumb gallery, but there's nothing. I'm flying blind without the CSS in question :)
Eraili May 11, 2012  Hobbyist Digital Artist
Aww I loved those mini thumbs ^^"
But sadly they also won't work on Google chrome :(
As far as I can tell they haven't worked in any browser for a year or more. I'm going to get around to fixing them sometime, but I don't know when I'll get my mojo back :shrug:

Eraili May 15, 2012  Hobbyist Digital Artist
Yeah sadly ^^"
Let's just see~
Forty-Fathoms Feb 28, 2012  Professional General Artist
Every time I use the code, they automatically center themselves. I would like them how they appear when you gave the example of how the colors work, you know being next to each other, not centered. I tried using the div align left but it didn't work.
nikki-ns Jul 6, 2011  Hobbyist Digital Artist
Thank you so much for this!
You're welcome, but, err, is it working correctly for you? It's been broken for a while and I've yet to fix it :confused:
nikki-ns Jul 7, 2011  Hobbyist Digital Artist
Yup! Just changed the CSS on my most recent journal entry. What's not working correctly for you? If it helps, I use float: left and I use :iconfirefoxplz:
When you hover the thumbs they make the layout jiggle all over the place as the thumbs bump into each other. That's not how it's meant to look :lol: - when you hover a thumb it should overlap the surrounding content without bumping everything around.

Either Firefox changed how it handles some of the CSS I used, or deviantart updated their CSS and caused a conflict. I've been lazy and haven't investigated, but I'll get around to it.
Add a Comment: