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="display: inline-block; 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" title="Aggression">
                            <img alt="Aggression" 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>                    
                    <p class="test">Test text!</p>
                </div>
                <div class="abilityInfoText" id="textID">
                    * 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 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>
            </span>
        </td>
    </tr>
</table>

CSS

p.test {
  display: none;
}

.abilityInfoText {
  // margin-top: 1em;
  display: none;
}

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 ~ div.abilityInfoText {
  display: block;
}