User:Saag/AbilityCircle: Difference between revisionsGive feedback
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
<div class="abilityImage" style="display:inline-block; width:{{{bgsize|128}}}px; height:{{{bgsize|128}}}px;"> | <div class="abilityImage" style="display:inline-block; width:{{{bgsize|128}}}px; height:{{{bgsize|128}}}px;"> | ||
<div style="position:absolute; filter: invert(42%) sepia(10%) saturate(2912%) hue-rotate(-40deg) brightness(190%) contrast(77%);">[[File:Passive ability frame.png|{{{bgsize|128}}}x{{{bgsize|128}}}px|link=]]</div> | <div style="position:absolute; filter: invert(42%) sepia(10%) saturate(2912%) hue-rotate(-40deg) brightness(190%) contrast(77%);">[[File:Passive ability frame.png|{{{bgsize|128}}}x{{{bgsize|128}}}px|link=]]</div> | ||
<div class="ability-icon | <div class="ability-icon popover__wrapper" | ||
style="width:100%; height:100%; display:flex; flex-direction:column; justify-content:center;"> | style="width:100%; height:100%; display:flex; flex-direction:column; justify-content:center;"> | ||
{{#if:{{{displayicon|}}}|[[File:{{{displayicon}}}|{{{iconsize|90}}}x{{{iconsize|90}}}px|middle|center|link=]]|[[File:{{{name|Smoke Bomb}}}.png|link=|{{{iconsize|90}}}x{{{iconsize|90}}}px|middle|center]]}} | {{#if:{{{displayicon|}}}|[[File:{{{displayicon}}}|{{{iconsize|90}}}x{{{iconsize|90}}}px|middle|center|link=]]|[[File:{{{name|Smoke Bomb}}}.png|link=|{{{iconsize|90}}}x{{{iconsize|90}}}px|middle|center]]}} | ||
</div> | </div> | ||
<div class=" | <div class="popover__content" style="text-align:left"> | ||
{{Ability card | {{Ability card | ||
|name=Splatter | |name=Splatter | ||
| Line 22: | Line 22: | ||
</div> | </div> | ||
</onlyinclude> | </onlyinclude> | ||
<div class="hover-wrapper" style="display:inline-block; margin-left: 20px; margin-bottom: 15px; width:768px"> | |||
<!-- The element that triggers the hover effect --> | |||
<div class="hover-to-show"> | |||
Hover me | |||
</div> | |||
<!-- The overlay that appears on hover --> | |||
<div class="hide"> | |||
I'm the hidden content! | |||
</div> | |||
<!-- Your other content here --> | |||
<table> | |||
<!-- Table content --> | |||
</table> | |||
</div> | |||
Isolated port of the ability circle and background from [[Template:Ability card]]. Intended for use on [[Heroes]]. | Isolated port of the ability circle and background from [[Template:Ability card]]. Intended for use on [[Heroes]]. | ||