Template:IconHover: Difference between revisions

image-up: the top image file link.
image-down: the bottom image file link.
width: the width of the images. (54px by default)
link: a link when pressing the button.
title: a title that will appear when hovering above the button.
style: extra style for the table.

Latest revision as of 00:21, 24 November 2022

Information: If you want to test this template, please use Sandbox.
This documentation is transcluded from Template:IconHover/doc.

{{IconHover
|image-up=
|image-down=
|width=
|link=
|title=
|style=
}}

All of these parameters are optional.
Please note that the sizes of image 1 and image 2 should be the same.

In order to hide the bottom image, and only show it when hovering above the top image, add another parameter:

|hidebottom= true

However, it will not be displayed this way in editing mode.

@@ Line 1: / Line 1: @@
-<includeonly><div style="position:relative; padding:0;"><table style="display: block-table; {{#if:{{{style|}}}|{{{style}}}}}"><tr><p class="fadeout-container {{#ifeq:{{{hidebottom}}}|true|fadeout-hide-bottom}}"><span class="fadeout" style="position: absolute; width: {{{width|}}}">[[File:{{{image-up|Dunno.png}}}|{{{width|54px}}}|link={{#if:{{{link|}}}|{{{link}}}}}{{#if:{{{title|}}}|{{!}}{{{title}}}}}]]</span><span class="fadein" style="width: {{{width|}}}">[[File:{{{image-down|TransShared.png}}}|{{{width|54px}}}]]</span></p></tr></table></div></includeonly><noinclude>{{Doc}}</noinclude>
+<includeonly>{{#css:
+.fadeout-container:hover .fadeout {
+    z-index: initial!important;
+}
+}}<div style="position:relative;"><table style="display: block-table; {{#if:{{{style|}}}|{{{style}}}}}"><tr><p class="fadeout-container {{#ifeq:{{{hidebottom}}}|true|fadeout-hide-bottom}}" style="display:inline-block;"><span class="fadeout" style="position: absolute; width: {{{width|}}}">[[File:{{{image-up|Dunno.png}}}|{{{width|54px}}}|link={{#if:{{{link|}}}|{{{link}}}}}{{#if:{{{title|}}}|{{!}}{{{title}}}}}]]</span><span class="fadein" style="width: {{{width|}}}">[[File:{{{image-down|TransShared.png}}}|{{{width|54px}}}]]</span></p></tr></table></div></includeonly><noinclude>{{Doc}}</noinclude>