Synonym Editor -

by Kriem

HTML

<div class="collection" id="c1">
    <ul>
        <li>Google</li>
        <li>Adwords</li>
    </ul>
</div>
    
<div class="collection" id="c2">
    <ul>
        <li>Google</li>
        <li>Adwords</li>
    </ul>
    <ul>
        <li>Advertisement</li>
    </ul>
</div>
    
<div class="collection" id="c3">
    <ul>
        <li>Japan</li>
    </ul>
</div>

CSS

* {-webkit-box-sizing: border-box; box-sizing: border-box;}

.collection
{
    background-color:#ccc;
    position:absolute;
    border-radius:100%;
    font-family: Helvetica, Arial;
    text-align:center;
    color:#333;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
   // font-size:0;
    left:50%;
    top:50%;
    box-shadow: 1px 2px 2px rgba(0,0,0,.25);
    
    width: 50%;
    height: 0;
    padding-bottom: 50%;
}
.collection ul 
{
    position:       relative;
    display:        inline-block;
    margin:         2px;
    padding:        0;
    border-radius:  5px;
    background:     rgba(0,0,0,0.15);
    //font-size:      0;
    box-shadow:     1px 2px 2px rgba(0,0,0,.5);
    cursor:         pointer;
}
.collection ul li
{
    position:relative;
    display:inline-block;
    font-size:11px;
    font-weight:bold;
    padding:.3em 0 .3em .6em;
    vertical-align: middle;
}
.collection ul li:last-child
{
    padding-right:.6em
}

JavaScript

$('.collection').each(function(i){
    
    console.log(i); 
    
    $(this).css({
       
        left: Math.random()*50 + (i*50),
        top:  Math.random()*50 + (i*50)                    
    });
});

$('#c3').hide();
$('#c2').hide();