XCOM 2 Wiki Ability Template Demonstrator

by Tvol

HTML

<table style="margin: 1em 0 1em 0; background-color: #17181a; border: 1px #83c0ce solid; border-collapse: collapse; text-align: center; color:#83c0ce; width: 100%;">
  <tr>
    <td>
      <span class="ability" id="" style="padding: 13px 13px 13px 13px;">
                <div class="abilityImageContainer" id="" style="position: relative; display: inline-block;">
                    <div class="abilityImage" id="">
                        <a href="http://www.ufopaedia.org/images/0/00/LW_AbilityAggression.png" class="image">
                            <img src="http://www.ufopaedia.org/images/0/00/LW_AbilityAggression.png" width="38" height="38">
                        </a>
                    </div>
                    <a href="http://www.ufopaedia.org/images/f/ff/XCOM2_infoIcon_custom_1.png" class="infoIcon">
                        <div class="abilityInfoIcon" id="" style="position: absolute; height: 18px; width: 18px; left: 30px; top: 26px;">
                        </div>
                    </a>                    
                </div>
                <div class="abilityTextContainer" id="">
                    <div class="abilityName" id="" style="font-weight: bold; padding-top: 5px;">Aggression</div>
                    <div class="abilityDescription" id="" style="font-style: italic; padding-top: 3px">Gain +5 critical chance for each enemy you can see, up to a maximum of 30. Does not include enemies in Squadsight range.</div>
                    <div class="abilityInfoText" id="textID">Additional Info:<br>
                        * Gain +5 critical chance for each enemy you can see, up to a maximum of 30.<br />* Units visible at squadsight ranges do confer bonus.
                    </div>
                </div>
            </span>
    </td>
  </tr>
</table>

CSS

.ability {
  display: inline-block;
}

.abilityTextContainer {
  display: inline-block;
  text-align: left;
  padding-left: 16px;
  position: relative;
  bottom: 3px;
  // max-width: 450px;
  min-width: 200px;
  max-width: 60%;
}

.abilityImageContainer {
  vertical-align: top;
  display: block;
  clear: both;
}

.abilityInfoText {
  text-align: left;
  display: none;
  padding-top: 8px;
}

div.abilityInfoIcon {
  background-image: url('http://www.ufopaedia.org/images/f/ff/XCOM2_infoIcon_custom_1.png');
  background-size: 18px 18px;
  background-repeat: no-repeat;
}

.abilityImageContainer:hover > a.infoIcon > div {
  background-image: url('http://www.ufopaedia.org/images/9/9c/XCOM2_infoIcon_custom_2.png');
  background-size: 18px 18px;
  background-repeat: no-repeat;
}

.abilityImageContainer:hover + .abilityTextContainer > .abilityInfoText {
  display: block;
}