update on 18th April 2011: Latest version of Firefox (haven't tested other browsers) breaks the mini thumbs, stopping them from popping out when hovered over. Will look into it in the coming days.
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 CustomisationThe 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.
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.
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 caveatsDoesn'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?
`ChewedKandi has certainly gone out of her way to keep the vector community on the right path. Always making sure that her talents are infinitely scalable, Sharon has put her bezier curves to excellent use, and firmly anchored herself as an inspirational leader. We're absolutely delighted to bestow the Deviousness Award for June 2013 to `ChewedKandi. Congratulations, Sharon! Read More
Sta.sh
years
ago a
crack
commando
unit
was sent to prison
by a military court
for a crime
they didn't commit. These men:thumb26014895: promptly escapedthe great escape.. by ~poop-art from a maximummaximum by ~maliozturk securityThe Security Guard by ~theperfectjez stockadeKayla in the stocks by ~LynxPulse to the Los AngelesLos Angeles by ~nishball undergroundUrban Burn by ~BreakFreePhotography.banana. period. by ~archlove Today, stillStill Morning Meadow by ~kasmel wantedJesus Wanted Poster by ~rowanseymour by the governmentNo Government by ~kcdevin, they survive:thumb59759078: as soldiersRise and Shine by `ukitakumuki of fortuneFortune Cookie Madness by *kickass-peanut. If you have a problemrubiks cubiks by ~grrrant and no oneOne by `Manu-80 else can help:thumb62695159:, and if you can find themPurple Team by ~Prasa, maybe you can hire the A-teamA-Team vers.2 by ~kypsis.
McCarver House Development 10 by ~KSDale03 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
Happy 
But sadly they also won't work on Google chrome
Let's just see~
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.