Simple transition

by victorrseloy

HTML

<div class="container">
  <input id="target" class="target" type="checkbox"/>
  <div class="box"></div>
  <label class="box" for="target"></label>
</div>

CSS

.box{
	background: red;
  width:200px;
  height:200px;
  transition: width 0.2s linear, height 0.2s linear
}


.target:checked ~ .box{
	background: red;
  width:400px;
  height:400px;
}

.container{
  position:relative;
 
}
.target{
  display: none;
}
.container > label {
  display:block;
  width:200px;
  height:200px;
  top:0;
  position:absolute;
 
}