JSFiddle - React, Tailwind, and code Playground

by Ganga Ponnu

HTML

<script src="http://leaverou.github.io/prefixfree/prefixfree.min.js"></script>
<div id="rotator0">
<div><img alt="Salad" class="Fmenu" src="http://1.bp.blogspot.com/-ldVqrTxdJ7g/UK7ZmRtSOII/AAAAAAAAB0U/uuj8GIjIcqI/s1600/DSC_8523.JPG"/></div> 
<div><img alt="Rolls" class="Fmenu" src="http://www.foodrepublic.com/sites/default/files/imagecache/enlarge/whatwereeating_lunch_katiroll.jpg"/></div>   
<div><img alt="Soup" class="Fmenu" src="http://cdn.sailusfood.com/wp-content/uploads/2012/02/sweet-corn-vegetable-soup.jpg"/></div>
<div><img alt="Starters" class="Fmenu" src="http://www.indianfoodforever.com/images/indian-starters.jpg"/></div>
<div><img alt="Beverages" class="Fmenu" src="http://mamaspizzaalpharetta.com/wp-content/uploads/2013/06/2Liter-Coke.jpg"/></div>
<div><img alt="Chopsuey" class="Fmenu" src="http://267313747.r.worldcdn.net/images/720/American-Chopsuey-1.jpg"/></div>
</div>


<div id="rotator">
<div><img alt="Tiffin" class="Cmenu" src="http://www.colourbox.com/preview/3803939-926382-south-indian-breakfast-dosa-in-golden-brown-color.jpg"/></div>
<div><img alt="Combo" class="Cmenu" src="http://s3-media4.ak.yelpcdn.com/bphoto/L1-ZLTGASrue9qmjoR5Sww/l.jpg"/></div>    
<div><img alt="Kebab"  class="Cmenu" src="http://www.candicekumai.com/wp-content/uploads/2011/07/barbecue-chicken.jpg"/></div>
<div><img alt="Chi-Rice" class="Cmenu" src="http://manoharskitchen.files.wordpress.com/2012/05/img_8813.jpg"/></div>
<div><img alt="Parota" class="Cmenu" src="http://delightdishes.com/wp-content/uploads/2014/03/Chicken-Kothu-parotta.jpg"/></div>
<div><img alt="Ind-Veg" class="Cmenu" src="http://www.aathithyacaterers.com/assets/images/454485839999a35c582.jpg"/></div>
<div><img alt="FBread" class="Cmenu" src="http://www.sitaruab.com/images/menu_item_images/garlic_Naan.jpg"/></div>
<div><img alt="Ind-NV" class="Cmenu" src="http://www.dietihub.com/wp-content/uploads/2011/03/Quick-To-Make-Chicken-Curry-Recipe.jpg"/></div>
<div><img alt="Pulao" class="Cmenu"...

CSS

@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}
#rotator0 {
    position:absolute;
    left:400px; top:300px;
    width:380px;
    height:380px;
    margin:20px auto;
    font-size:15px;
    line-height:3;
    animation: circle 25s linear infinite;
    transform-origin: 50% 50%;
    z-index:10;
}
#rotator0 > div {
    animation: inner-circle 25s linear infinite;
    background-color:#e1e1e1;
  -moz-border-radius:150px;
  -webkit-border-radius:150px;
 width:100px;
 height:100px;
 border:1px dotted black;
}
.Fmenu{
 width:100px;
 height:100px;
  -moz-border-radius:150px;
  -webkit-border-radius:150px;    
}

#rotator {
   position:absolute;
  left:200px; 
 top:100px;
   width:790px;
    height:790px;
    margin:20px auto;
    font-size:15px;
    line-height:3;
    animation: circle 25s linear infinite;
    transform-origin: 50% 50%;
}
#rotator > div {
    animation: inner-circle 25s linear infinite;
    background-color:#e1e1e1;
  -moz-border-radius:150px;
  -webkit-border-radius:150px;
 width:150px;
 height:150px;
 border:1px dotted black;
}
.Cmenu{
 width:150px;
 height:150px;
  -moz-border-radius:150px;
  -webkit-border-radius:150px;    
}

JavaScript

$("document").ready(function(){
console.log("DAdS");
menuCircle(); 
});
function menuCircle(){
    var ssrc,valt;
         $('#rotator div').hover(
         function () {
                ssrc = $(this).find('img').attr("src");
                valt = $(this).find('img').attr("alt");        $(this).children('img').attr('src','http://placehold.it/190x190&text='+valt);
         }, 
         function () {
               $(this).children('img').attr('src',ssrc);
         }
     );
         $('#rotator0 div').hover(
         function () {
                ssrc = $(this).find('img').attr("src");
                valt = $(this).find('img').attr("alt");        $(this).children('img').attr('src','http://placehold.it/150x150&text='+valt);
         }, 
         function () {
               $(this).children('img').attr('src',ssrc);
         }
     );    
    //arrange blocks in a circle
    var iblock = $("#rotator0 div").get(),
    iincrease = Math.PI * 2 / iblock.length,
    ix = 0, iy = 0, iangle = 0;
    
    for (var j = 0; j< iblock.length; j++) {
        var ielem = iblock[j];
        ix =105 * Math.cos(iangle) + 150;
        iy = 105 * Math.sin(iangle) + 150;
        ielem.style.position = 'absolute';
        ielem.style.left = ix + 'px';
        ielem.style.top = iy + 'px';
        var irot = 90 + (j * (360 / iblock.length));        
        iangle += iincrease;
    }
    
    var block = $("#rotator div").get(),
    increase = Math.PI * 2 / block.length,
    x = 0, y = 0, angle = 0;

    for (var i = 0; i < block.length; i++) {
        var elem = block[i];
        x = 300 * Math.cos(angle)+320 ;
        y = 300 * Math.sin(angle) +320;
        elem.style.position = 'absolute';
        elem.style.left = x + 'px';
        elem.style.top = y + 'px';
        var rot = 90 + (i * (360 / block.length));        
        angle += increase;
    }
}