XF 1.3 Stacking Images That Reveal On Hover

[JABRONI]

I currently have a bunch of usergroup images for the different groups on my site, and as you can imagine, they can take up a good amount of space.

This is the current code I use for them,

<xen:if hascontent="true">
    <div class="twfranks">
        <xen:contentcheck>
            <xen:if is="{xen:helper ismemberof, $user, 3}" >
                <a href="{xen:link members/trophies, $user}" class="concealed OverlayTrigger"><img src="http://theforum.com/styles/ranks/admin.png" class="Tooltip" title="Administrator" /></a>
            <xen:elseif is="{xen:helper ismemberof, $user, 4}" />
                <a href="{xen:link members/trophies, $user}" class="concealed OverlayTrigger"><img src="http://theforum.com/styles/ranks/moderator.png" class="Tooltip" title="Moderator" /></a>
            <xen:elseif is="{xen:helper ismemberof, $user, 5}" />
                <a href="{xen:link members/trophies, $user}" class="concealed OverlayTrigger"><img src="http://theforum.com/styles/ranks/premium.png" class="Tooltip" title="Premium Member" /></a>
            <xen:elseif is="{xen:helper ismemberof, $user, 2}" />
                <a href="{xen:link members/trophies, $user}" class="concealed OverlayTrigger"><img src="http://thewweforum.com/styles/ranks/Member.png" class="Tooltip" title="Member" /></a>
            </xen:if>
         
            <xen:if is="{xen:helper ismemberof, $user, 10}" >
                <a href="{xen:link members/trophies, $user}" class="concealed OverlayTrigger"><img src="http://theforum.com/styles/ranks/theincrowd.png" class="Tooltip" title="The In Crowd" /></a>
            </xen:if>
            <xen:if is="{xen:helper ismemberof, $user, 7}" >
                <a href="{xen:link members/trophies, $user}" class="concealed OverlayTrigger"><img src="http://theforum.com/styles/ranks/breadyworldorder.png" class="Tooltip" title="Bready World Order" /></a>
            </xen:if>
            <xen:if is="{xen:helper ismemberof, $user, 20}" >
                <a href="{xen:link members/trophies, $user}" class="concealed OverlayTrigger"><img src="http://theforum.com/styles/ranks/dank.png" class="Tooltip" title="D.A.N.K" /></a>
            </xen:if>
            <xen:if is="{xen:helper ismemberof, $user, 19}" >
                <a href="{xen:link members/trophies, $user}" class="concealed OverlayTrigger"><img src="http://theforum.com/styles/ranks/thesqueakersquad.png" class="Tooltip" title="The Squeaker Squad" /></a>
            </xen:if>
        </xen:contentcheck>
    </div>
</xen:if>

The first group is for regular ranking like Admin, Mod, Premium, Member. These overrule each other based on your highest priority group as seen by the xen else conditional.

The second group is for the different groups on the site that don't overrule each other. They are each standalone.

The result I want basically is for it to show one usergroup image (highest priority), and then hide the rest until you hover over that one usergroup image.

Is this something that is possible?

Willing to pay a few bucks for anyone who can work this out for me.