Add a flip to add info to the back of a custom mini profile

[Eycd]

Hey.

I would like to add I think I have seen before where when you hover over a mini profile it flips over and shows the back, in which you can have an image and other information.

I would like to do this but I do not know how:

a) could someone add it into my custom mini profile which I'll leave the code of below.
b) show me how to add a background image
c) how to add fields and information
d) set it for certain members only

thanks

mini profile code:



<div class="$[miniprofile_class]" {foreach $[user.custom_field]} {if $[user.custom_field.name] == "Mini Profile Background Image (Enter URL)"}style="background-image: url('$[user.custom_field.value]');"{/if}{/foreach}>

   $[user]<br />

   {if !$[user.is_member]}Guest<br />{/if}

   {if $[user.custom_title]}<b>$[user.custom_title]</b><br />{/if}

   {if $[user.group]}

   $[user.group.name]<br />$[user.group.stars]<br />

   {elseif $[user.rank]}

   $[user.rank.name]<br />

   {if $[user.rank.stars]}

   $[user.rank.stars]<br />

   {/if}

   {/if}

   $[user.warning.bar]

   <br />

   {if $[user.avatar]}

   <div class="avatar">$[user.avatar]</div><br />

   {/if}

   {if $[user.personal_text.message]}

   <div style="padding-bottom:1px;">$[user.personal_text]</div>

   {/if}

   <hr size="1" style="margin-top:2px; margin-bottom:0px;" color= #000000/>

   {if $[user.is_member]}

   <div class="info" style="padding-top:5px; font-size:11px;">

       <u>Posts</u> - $[user.posts]{if $[user.gender]}<span class="float-right">$[user.gender.image]</span>{/if}

       <br /><u>Likes</u> - $[user.likes]

       {if $[user.location]}<br /><u>Location</u> - $[user.location]{/if}

       {foreach $[user.mini_custom_field]}<br/>

       <span class="$[user.mini_custom_field.content_class]"><u>$[user.mini_custom_field.name]</u> - $[user.mini_custom_field.value]</span>

       <br> Last Online $[user.last_online]<br/>

       {else}

       {/foreach}

       <hr size="1" style="margin-top:4px; margin-bottom:1px;" color= #000000/>

       {if $[current_user.is_member]}<a href="$[user.pm_href]" alt="PM $[user.name]" style="font-size:11px;">{if $[user.is_member]}Send Message{/if}</a><br/>{/if}

       {if $[user.social_network.is_member]}{if $[user.social_network]}

       {foreach $[user.social_network]}

       $[user.social_network]$[user.social_network.comma]

       {/foreach}{/if}<br/>{/if}

   </div>

   {/if}

   {if $[user.miniprofile_badge]}

   <div class="$[user.miniprofile_badge_container_class]">

       {foreach $[user.miniprofile_badge]}

       $[user.miniprofile_badge.image.thumb]

       {/foreach}

   </div>

   {/if}

</div>