Transition In Div

I have three different boxes in same row. I want transition in those boxes when clicked inside the box. Right now when i click on any box it will expand from left to right and ge

Solution 1:

Transition transform: scale(), and that will allow the element to expand over the others. You can just assign a class via js for that property to transition and you can do that in pure CSS. And since each element is 20% wide, transitioning scaleX(5) would be 100%. And use transform-origin to change which direction the elements expand from.

var containerWidth = $(".container").width();
$(".box").click(function() {
  var id = $(this).attr("id");
  $(this).addClass('scale');
});

.box {
  width:20%;
  height: 200px;
  margin: 10px;
  float:left;
  transition: transform .5s;
  transform-origin: 00;
}
#first {
  background-color: red;
}
#second {
  background-color: green;
  transform-origin: center center;
}
#third {
  background-color: blue;
  transform-origin: 100%0;
}

.scale {
  transform: scaleX(5);
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container"><divid="first"class="box"></div><divid="second"class="box"></div><divid="third"class="box"></div></div>

Though this effect would work a lot better if the elements were evenly spaced within the parent, then they will overlap and fill the parent evenly. Using display: flex; justify-content: space-between; on the parent enables that.

var containerWidth = $(".container").width();
$(".box").click(function() {
  var id = $(this).attr("id");
  $(this).addClass('scale');
});

.container {
  display: flex;
  justify-content: space-between;
}

.box {
  width:20%;
  height: 200px;
  transition: transform .5s;
  transform-origin: 00;
}
#first {
  background-color: red;
}
#second {
  background-color: green;
  transform-origin: center center;
}
#third {
  background-color: blue;
  transform-origin: 100%0;
}

.scale {
  transform: scaleX(5);
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container"><divid="first"class="box"></div><divid="second"class="box"></div><divid="third"class="box"></div></div>