JSFiddle - React, Tailwind, and code Playground

by George Berkeley

HTML

<div class="contenedor">
    <div class="caja1">
        Caja 1
    </div>
    <div class="caja2" title="caja2">
      Caja 2
    </div>
    <div class="caja3" title="caja3">
      Caja 3
    </div>
  </div>

CSS

.contenedor {
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:5%;
}

.caja1, .caja2, .caja3 {
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	color:white;	
	-webkit-transform:translateY(0%);
	background-color:rgba(0,0,255,.5);	
}

.caja1 {
	text-align:center;
	z-index:1000;}

.caja2 {
	text-align:left;
	z-index:0;
	-webkit-transition:all ease 1s;
	-webkit-transition-delay:0s;
}
.caja3 {
	text-align:left;
	z-index:0;
	-webkit-transition:all ease 1s;
	-webkit-transition-delay:1s;
}


.contenedor:hover div[title="caja2"] {-webkit-transform:translateY(100%);}

.contenedor:hover div[title="caja3"] {-webkit-transform:translateY(200%);}