Eternal Card Game Wiki
Advertisement
Eternal Card Game Wiki
Template documentation (for the above template, sometimes hidden or invisible) [view] [edit] [history] [refresh]

Description

This template is used to create a pop-up card image when the user's cursor hovers over specified content.

Syntax

Type {{CardHover|<cardname>}} on an article page, replacing <cardname> with the desired card.

You may also use the shortcut {{ch}} to place this template.

Parameters

This template has 3 main components - the hover card image, the displayed text, and the link the text directs to. By default, all three use the first unnamed parameter. The following optional parameters may be used to customize these components:

text = custom text
The 'text' parameter, or 2nd unnamed parameter, replaces the text with the custom text.
link = custom link
The 'link' parameter changes the page text is linked to.
image= card image
Use the 'image' parameter when the card image is different than the card name. This can happen for some noncollectible cards with alternate versions, and for archived images for old versions of a card.
For alternate-art cards, image=alt may be used as a shortcut to display the alternate variation.

Another optional parameter, 'top' , may be used to reposition the hover-image. Use top=true when {{CardHover}} is used near the top of a page to make the image appears lower than normal. This prevents clipping and overlapping issues.

Result

{{CardHover|Thunderbird}}

gives: Thunderbird

{{CardHover|Rolant, Iron Tyrant|alternate-art Rolant|image=alt}}

gives: alternate-art Rolant

Dependencies

Requires the following custom CSS to work:

.hoverLink {
    position: relative;
    display: inline-block;
}
/* This part is for the hidden image (works with text too). */
/*This is where you can finetune the position and appearance of the pop-up image with */
/*"top:50%", "left: 100%", "background: black" etc. properties. */
.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; 
}
/* Makes the pop-up visible when hovering */
.hoverLink:hover .hoverCard {
    visibility: visible;
    opacity: 1;
    position: absolute;
        margin-top: -29em;
	    margin-left: 9em; 
/* Feel free to mess around with those 2 margin numbers as they move */
/* where the image is in relation to the text. */
/* Be careful, a change 4 moves past small words */
}

Credit

CSS by User:NightSavior

Old Version

Old Version was a bit more glitchy but still worked fine. Check it out at: http://eternalcardgame.wikia.com/wiki/Template:CardHover/old
The above text is transcluded from Template:CardHover/doc; you can change it or view its history.
If you're done making changes, please refresh the text. (Why?)
You can experiment in this template's sandbox (edit | diff) and testcases (edit) pages.
Please add categories and interwikis to Template:CardHover/doc.
How does this work?Template Info: [usage] [subpages] [history]
Advertisement