Editing User:Saag/AbilityCircleGive feedback

 <onlyinclude>
 <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 class="ability-icon popover-wrapper nopreview"
                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:{{#invoke:Abilities|get_ability_name|{{{hero_name}}}|{{{ability_num}}}}}.png|link=|{{{iconsize|90}}}x{{{iconsize|90}}}px|middle|center]]}}
              </div>
              
              <div class="popover-content" style="position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align:left; margin-top: -30px; max-width: 550px; min-width: 320px; width: 50vw; left: 0;">
                  <div style="max-width: 350px; height: 30px"></div>
                  {{#invoke:Abilities/card|get_ability_card|{{{hero_name}}}|{{{ability_num}}}|true}}
              </div>
	
            </div>
</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]].

{{User:Saag/HeroRosterCard|Abrams|Ability1=Siphon Life|Ability2=Shoulder Charge|Ability3=Infernal Resilience|Ability4=Seismic Impact}}

<noinclude>
<templatedata>
{
	"params": {
		"displayicon": {
			"description": "Use if the ability icon has a different name or uses another icon.",
			"example": "Smoke Bomb.png"
		},
		"iconsize": {
			"description": "Size of the whole icon. Defaults to 90",
			"example": "20",
			"default": "90"
		},
		"hero_name": {
			"description": "Name of the Hero",
			"example": "Bebop",
			"required": true
		},
        "ability_num": {
			"description": "Number of the ability",
			"example": "1",
			"required": true
		},
		"bgsize": {
			"description": "Size of the background circle. Should almost always be larger than the icon",
			"example": "128"
		}
	},
	"paramOrder": [
		"hero_name",
        "ability_num",
		"iconsize",
		"bgsize",
		"displayicon"
	]
}
</templatedata>
</noinclude>