Witcher Wiki
Witcher Wiki
{{{Size}}}px
Template documentation (for the above template, sometimes hidden or invisible)[view] [edit] [history] [refresh]

This template places an image that changes when you hover the mouse cursor over it. This is only meant for images of the same size, like in the character menu when hovering over skills.

Syntax

Type the following somewhere on the page:

{{Hover|thumb|imageDefaultShow|Size|imageOver|align}}

  • If the field "1" is filled with "thumb" the thumbnail style will be applied.
  • imageDefaultShow is the normally displayed image, and imageOver is the image that displays on hover.
  • Size is the size of the image, set in pixels. For the best results, use images of similar sizes.
  • align may be "left", "right", or "none"
  • Images use the regular file syntax.

Requirements

You must add the following styles for this template to work, usually to Special:CSS.

/* Hover images */
 .imgDefaultShow {
 overflow: visible;
 display: inline-block;
 position: relative;
 }
 
 .imgOver {
 display: block;
 visibility: hidden;
 width: inherit;
 height: inherit;
 overflow: hidden;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0
 }
 
 .imgDefaultShow:hover {
 visibility: hidden !important; /*hides bottom image in case it's too large*/
 }
 
 .imgDefaultShow:hover .imgOver {
 visibility: visible !important;
 }

Example

{{Hover|thumb|align = left|imageDefaultShow = [[File:Wiki.png]]|Size = 150|imageOver = [[File:Example.jpg]]}}

Wiki.png