divs slide in on hover

<style>

.container {
display: flex;
flex-direction: column; /* divs inside form a column instead of a row */
overflow: hidden; /* hides the divs when you initially translate them */
}

.box {
flex: 1; /* divs with the class .box will take up an equal amount of space available vertically since we flexed them as a column */
width: 80%; /* the divs’ width is 80% of the main container’s width */
transform: translateX(100%); /* will move the divs completely to the right, outside of the main container and we won’t see them since the overflow is hidden */
display: inline-flex;
}

.container:hover .box {
transform: translateX(0); /* when you hover the container the divs will move back to the original position */
}

.section {
flex: 1;
height: 100%;
}

</style>


<body>

<div class="container">
   <div class="item1 box">
       <div class="section"></div>
       <div class="section"></div>
   </div>
   <div class="item2 box">
       <div class="section"></div>
       <div class="section"></div>
   </div>
</div>

</body>