Ok, made it work by adding a bit from the old code to the new code: http://eternalcardgame.wikia.com/wiki/MediaWiki:Wikia.css

By tweaking with margin-top and margin left I can move the image around the page in relation to the words. Started using it on the Skysnapper page as an example.

Not noticing any bugs right now. Will test it on the other pages CardHover is on tomorrow. 

Thanks a ton, code seems to be working better and it's way cleaner. 

If you wanted to make the positioning of the card code a bit more clear you could do the following:

.hoverLink .hoverCard {
    visibility: hidden; 
    opacity: 0; /* Opacity and transition are a little fading gimmick */
    transition: opacity 0.35s;
    /* Position the pop-up */
    position: absolute;
    z-index: 1; 
    bottom: 110%;
    left: 20%;
}
/* Makes the pop-up visible when hovering */
.hoverLink:hover .hoverCard {
    visibility: visible;
    opacity: 1;
    position: absolute;
}

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.

I feel we don't have to mess with the overflow if we just move the card to a place where it won't overflow.

Aka the card appears above the link instead of below it.

I found this website recently: http://jsfiddle.net/fB7ee/1/ (this is an example)

We could test out CSS stuff there.

I noticed something strange about the CardHover template. I think you mentioned it as a problem earlier too...

For some strange reason, it seems to create a "box" of the following text if it has a space right after the template call.

Example: Cloudnest Serpent works like this but not like this: Cloudnest Serpent and some text.

I don't remember having that problem before...

PS: In addition, it seems that the images show REALLY small when the templates are used here in the forum...

Actually, the same happens with other templates too... At least with Card:

and some text.

With some testing, I realized that it's because of the documentation template. Need to check why it causes the problem...

SOLVED: No line breaks between the template code and documentation template! Like this:

Template code<noinclude>
{{documentation}}
</noinclude>

Oh ok, so remove all line breaks from templates?

Also put the top post into its own page: http://eternalcardgame.wikia.com/wiki/Eternal_Card_Game_Wikia:Templates

I think I already removed the line breaks from all of them.

Yeah, I'm just checking for the future.