JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<span></span>  
<div>3</div>
<div>2</div>
<div>1</div>
</div>

CSS

.wrapper {
  float: left;
  width: 330px;
}
.wrapper > div
	{
	  width:100px; 
		height:100px; 
		float:right;
		margin:5px;
    position: relative;
    right: 0;
		box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
		background-color:rgba(25,25,25,0.7);
		transition: all 0.5s ease;
		-webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
	}

.wrapper > span {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
}
.wrapper > span:hover {
  width: 200px;
  height: 200px;
}
.wrapper > span:hover + div + div {
  margin-top: 110px;
  margin-right: -105px;
}
.wrapper >  div:first-of-type:hover
	{
		width:200px;
		height:200px;
		margin:10px 115px 0px -105px;
    right: -110px;
	}
.wrapper:hover >  div:first-of-type + div:hover
	{
		width:200px;
		height:200px;
		margin:10px 115px 0px -105px;
    right: -110px;
	}
.wrapper >  div:first-of-type + div:hover + div {
  margin-top: -100px;
}
.wrapper >  span:hover ~ div:last-of-type {
		width:200px;
		height:200px;
		margin:10px 115px 0px -105px;
    right: -110px;
	}