Image met hover effect & tekst.

Beste,

hier is de code:

<a class="big-champion-icon" href="http://www.leagueofassassins.eu/3D-viewer/Aatrox/0.html" data-name="aatrox" style="display: block; margin: 5px; border-radius: 6px; position: relative; height: 100px; width: 100px; border: 1px solid rgb(17, 17, 17); box-shadow: rgb(0, 0, 0) 0px 0px 2px; float: left; background: url(http://lkimg.zamimg.com/shared/riot/images/champions/266_104.png) 50% 50% repeat scroll rgb(0, 0, 0);">
	<div class="shim"></div>
	<div style="position: absolute; left: 0px; width: 100%; text-align: center; bottom: 0px; font-size: 13px; line-height: 28px; text-shadow: 1px 1px 1px #000; color: gold;">Aatrox</div>
</a>

het moet er zo uitzien: http://prntscr.com/auzo20
en dat heb ik nu via html inspecteren zo gekregen.
maar echter zodra ik de code in wordpress editor gewoon ingeef bij (html code). (tekst) DUS NIET DE VISUELE xD! .. ziet het er zo uit: http://prntscr.com/auzold

en ik weet niet hoe ik dit moet oplossen.. ik heb ook al in de css style gekeken van de big-champion-icon class. maar ook daar niks geks te vinden.
p.s ik ben geen expert.