JSFiddle - React, Tailwind, and code Playground

by Prashank Abhishek

HTML

<div id="container">
<div id="icon"><img src=""><div id="info"></div></div>
<div id="icon"><img src=""><div id="info"></div></div>
<div id="icon"><img src=""><div id="info"></div></div>
<div id="icon"><img src=""><div id="info"></div></div>
<div id="icon"><img src=""><div id="info"></div></div>
<div id="icon"><img src=""><div id="info"></div></div>
<div id="icon"><img src=""><div id="info"></div></div>
<div id="icon"><img src=""><div id="info"></div></div>
    </div>

CSS

#container {
    position:absolute;
    padding:10px;
    width:725px;
    left:0px;
    top:0px;
    border:1px solid #000; }
    
#icon {
    position:relative;
    display:inline-block;
    margin-left:25px;
    margin-bottom:25px; 
    text-align:center;
    border:5px solid #fff; /* change ICON BORDER COLOR here */ }
    
#icon img { 
    padding:5px;
    width:125px;
    height:125px;
    opacity:1;
    transition-duration:0.5s;  
    -moz-transition-duration:0.5s;  
    -webkit-transition-duration:0.5s;  
    -o-transition-duration:0.5s; }
    
#info {
    z-index:2;
    position:absolute;
    background:#000;
    color:#fff;
    top:0px;
    width:100%;
    height:100%;
    opacity:0;
    transition-duration:0.5s;  
    -moz-transition-duration:0.5s;  
    -webkit-transition-duration:0.5s;  
    -o-transition-duration:0.5s; }
    
#icon:hover #info {
    opacity:1;
    width:655px;
    transition:opacity 0.5s, width 0.5s ease 0.5s;  
    -moz-transition:opacity 0.5s, width 0.5s ease 0.5s; 
    -webkit-transition:opacity 0.5s, width 0.5s ease 0.5s; 
    -o-transition:opacity 0.5s, width 0.5s ease 0.5s;
}
div#icon:hover:nth-child(2) #info,
div#icon:hover:nth-child(6) #info {
    width: calc(655px - 173px);
}
div#icon:hover:nth-child(3) #info,
div#icon:hover:nth-child(7) #info {
    width: calc(655px - 173px*2);;
}
div#icon:hover:nth-child(4) #info,
div#icon:hover:nth-child(8) #info {
    width: calc(655px - 173px*3);
}