JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<div class="cluster">

<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 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 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 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 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>

CSS

/* 
 * ==== 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);
}

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');
        }
        
    });
    

    
});