JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div class="cluster">
    
    
<div class="wrapper2">
    <div class="part-p2">
    
        <div class="octo-p2">
          <div class="octo1-p2">
            <img id="imgOct-p2" src="http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg" alt="octastuf" width="150" height="150" />
          </div>
        </div>
    </div>
</div>    


<div class="wrapper3">
    <div class="part-p3">
        <div class="octo-p3">
          <div class="octo1-p3">
            <img id="imgOct-p3" src="http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg" alt="octastuf" width="150" height="150" />
          </div>
        </div>
    </div>
</div>    
    
    
<div class="wrapper1">
    <div class="part">
    
        <div class="octo">
          <div class="octo1">
            <img id="imgOct" src="http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg" alt="octastuf" width="150" height="150" />
          </div>
        </div>
    </div>
</div>
    
 
    

    
    
<div class="wrapper4">    
    <div class="part-p4">
    
        <div class="octo-p4">
          <div class="octo1-p4">
            <img id="imgOct-p4" src="http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg" alt="octastuf" width="150" height="150" />
          </div>
        </div>
    </div>
</div>

    
<div class="wrapper5">    
    <div class="part-p5">
        <div class="octo-p5">
          <div class="octo1-p5">
            <img id="imgOct-p5" src="http://www.psdgraphics.com/wp-content/uploads/2014/02/colorful-triangles.jpg" alt="octastuf" width="150" height="150" />
          </div>
        </div>
    </div>
</div>
    
    
</div>

CSS

.cluster
{
    width:450px;
    height:450px;
    position:relative;
}


/* 
 * ==== octogone
 */
.octo, .octo div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
}
.octo, .octo div {
  width: 150px;
  height: 150px;
}
.octo {
  transform: rotate(45deg);
}
.octo1 {
  transform: rotate(-45deg);
}







.octo-p2, .octo div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
}
.octo-p2, .octo div {
  width: 150px;
  height: 150px;
}
.octo-p2 {
  transform: rotate(45deg);
}
.octo1-p2 {
  transform: rotate(-45deg);
}







.octo-p3, .octo div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
}
.octo-p3, .octo div {
  width: 150px;
  height: 150px;
}
.octo-p3{
  transform: rotate(45deg);
}
.octo1-p3 {
  transform: rotate(-45deg);
}

















.octo-p4, .octo div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
}
.octo-p4, .octo div {
  width: 150px;
  height: 150px;
}
.octo-p4 {
  transform: rotate(45deg);
}
.octo1-p4 {
  transform: rotate(-45deg);
}












.octo-p5, .octo div {
  margin: 0 auto;
  transform-origin: 50% 50%;
  overflow: hidden;
  width: 150px;
  height: 150px;
}
.octo-p5, .octo div {
  width: 150px;
  height: 150px;
}
.octo-p5 {
  transform: rotate(45deg);
}
.octo1-p5 {
  transform: rotate(-45deg);
}




.wrapper1
{
   
    margin-right:0;
    margin-left:0;
    max-height:150px;
}

.wrapper2
{
    margin-left:20px;
    display:inline-block;
 
}
.wrapper3
{
   float:right;
   margin-right:20px;
}

.wrapper4
{
    display:inline-block;
    margin-left:20px;
}

.wrapper5
{
    float:right;
    margin-right:20px;
}

JavaScript

var animating = false;

  var callme = function()
{    
    if(animating)
    {
        $(".octo").animate({width:"180px", height:"180px"},
                           600,function()
                           {
                              animating = !animating;
                               callme();
                           });
         $(".octo1").animate({width:"180px", height:"180px"},
                           600);
         $("#imgOct").animate({width:"180px", height:"180px"},
                           600);
    }
    else
    {
            $(".octo").animate({width:"150px", height:"150px"},
                           600,function()
                           {
                              animating = !animating;
                               callme();
                           });
         $(".octo1").animate({width:"150px", height:"150px"},
                           600);
         $("#imgOct").animate({width:"150px", height:"150px"},
                           600);
    }
    
}



$(document).ready(function(){
    
    $("#imgOct").on("mouseenter",function(){
        animating = true;
         callme();
    });
    
    
    $("#imgOct").on("mouseleave",function(){
       $(".octo").stop();
       $(".octo1").stop();
       $("#imgOct").stop(); 
        var octoW = $(".octo").css('height');
        if(octoW != 150)
        {
          $(".octo").animate({width:"150px", height:"150px"},
                           'fast');
         $(".octo1").animate({width:"150px", height:"150px"},
                           'fast');
         $("#imgOct").animate({width:"150px", height:"150px"},
                           'fast');
        }
        
    });
    

    
});