JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

CSS

div.one,.two,.three
	{
	  display: inline-block;
    float: right;
	  width:100px; 
		height:100px; 
		margin:3px;
    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;
	}

  div.one:hover,div.two:hover
	{
		width:200px;
		height:200px;
		margin:3px 113px 0px -100px;
    right: -110px;
    float:left;
}
  div.three:hover {
    	width:200px;
		height:200px;
		margin:3px 113px 0px -100px;
    right: -110px;
    clear: none;
  }

div.fixed {
   width: 330px;
   height: 220px;
   background: whitesmoke;
}
}