A couple templates I've been using on the wikia. Will update as needed, just need a place to put these.

-Card : Displays a card image, with a link to the card page. Really simple, but repetitive. Code is {{Card|CARDNAME}}

-Card3 : Used to put 3 cards in a row. Needed for formatting. Can also show 1 or 2 cards in same formatting if 2nd or 3rd variable is ignored. Uses an invisible table, so will get shoved down if there's a CardInfobox to its right for example. Code: {{Card3|CARD1|CARD2|CARD3}}

-CardInfobox : Infobox for cards. That's it, just a couple of the labels renamed. Uses outdated infobox template, but new version looks super crappy displaying card info. Check page if you want code. Ton of variables.

-Rollover : Uses first part of hover CSS. Really glitchy and works weirdly. Use in other template.(don't use by itself.) Meant for use on images, I forced it onto text.

-CardHover : Uses all hover CSS stuff. When you Hover over a card link that uses this template, a popup of the card appears to the right. Can repurpose some of this code into "spoiler text" if it's necessary. Code: {{CardHover|CARDNAME}}

the margin- properties essentially move the "reference point" of the pop up while the "bottom" and "top" move the "box". Doesn't really matter which you use but for clarity, I'd place the positioning codes under the /*Position the pop-up*/ comment (the absolute position lets the image hover over other text and stuff of the box and z-index moves the pop-up to the front).

I also like using percentages more than em.

I also tested what happens to the pop-up at the right edge and it seems the column on the right blocks the hovering pop-up. I don't know how much you can see/edit as an admin but it's possible that the overflow property of the main column is set as "hidden". You could try to set it as "visible" somewhere. Here's a little guide to the overflow property.

Now the hovering images appear correctly and aren't cut out when reaching over the edge of the column. Needed to add this little bit of code:

.WikiaArticle {
overflow: visible;
}

It seems that .WikiaArticle is the class that is used for the articles in a Wikia. Like I guessed, the overflow attribute is "hidden" by default so changing it to "visible" lets the images "flow over" the edges of an article.

Now we just need to be careful so that we don't make tables or images that overflow where we don't want them to.

Notice that you might have to do a full refresh (bypass browsers cache) if the piece of code doesn't work instantly.