Group Menu

Heres a neat way to create a module "menu" for your groups. check the attached GIF to see the effect.
Simply copy paste this code into a "sourcerer" or FLEXI CUSTOM module.

If you set the module to PUBLIC it shows all groups.
If you set the module to REGISTERED it shows only the logged in users groups.

<style>

.demo-3 {

position:relative;

width:120px;

height:140px;

overflow:hidden;

float:left;

margin-right:0px

}

.demo-3 figure {

margin:0;

padding:0;

position:relative;

cursor:pointer;

margin-left:0px

}

.demo-3 figure img {

display:block;

position:relative;

z-index:5;

margin:-5px 0

}

.demo-3 figure figcaption {

display:block;

position:absolute;

z-index:2;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box

}

.demo-3 figure h2 {

font-family:'Lato';

color:#fff;

font-size:20px;

text-align:left

}

.demo-3 figure p {

display:block;

font-family:'Lato';

font-size:12px;

line-height:18px;

margin:0;

color:#fff;

text-align:left

}

.demo-3 figure figcaption {

top:0;

left:0;

width:100%;

height:100%;

padding:10px 10px;

background-color:rgba(78,78,78,0.5);

text-align:center;

backface-visibility:hidden;

-webkit-transform:rotateY(-180deg);

-moz-transform:rotateY(-180deg);

transform:rotateY(-180deg);

-webkit-transition:all .5s;

-moz-transition:all .5s;

transition:all .5s

}

.demo-3 figure img {

backface-visibility:hidden;

-webkit-transition:all .5s;

-moz-transition:all .5s;

transition:all .5s

}

.demo-3 figure:hover img,figure.hover img {

-webkit-transform:rotateY(180deg);

-moz-transform:rotateY(180deg);

transform:rotateY(180deg)

}

.demo-3 figure:hover figcaption,figure.hover figcaption {

-webkit-transform:rotateY(0);

-moz-transform:rotateY(0);

transform:rotateY(0)

}





</style>



<?

require_once( JPATH_ADMINISTRATOR . '/components/com_easysocial/includes/foundry.php' );



$options['types'] = 'currentuser';

$options['userid'] = $my->id;

$model = FD::model('Groups');

$groups = $model->getGroups($options);



foreach ($groups as $group) { 

$gr = FD::group($group->id); 

$group_name = $gr->getName($options);

$group_totalmembers = $gr->getTotalMembers($options);

$group_category = $gr->getCategory($options)->title; 

$group_avatar = $gr->getAvatar('square');

$group_link = $gr->getPermalink($options); 

?>

<span>

<a href = "<?echo $group_link;?>">



<ul class="demo-3">

<li>

<figure> 

<img src="/<?echo $group_avatar;?>" width = "120" height="120" alt="" />



<?echo "<figcaption>" 

. "<h6>"

. $group_name

. "<br>" 

. $group_totalmembers 

. " Members<br>";



?> 

</h6>

</figcaption></figure>

</li>

</ul> </a> </span> 

<?

}

?>

the effect:
https://gyazo.com/9da9ce1173cfe9ddb275e46e0967fe2a