JSFiddle - React, Tailwind, and code Playground

HTML

<div class='userpic'>some content</div>
<div class='commentpic'></div>
<div class='userpic margin'>some content</div>
<div class='userpic'>some content</div>
<div class='userpic'>some content</div>
<div class='userpic'>some content</div>
<div class='userpic'>some content</div>

CSS

.userpic, .commentpic
{
height:48px;
width:48px;
border-radius:5px;
z-index:1;
position:relative;
background-color:red;
}
.commentpic {
    position:absolute;
}
.commentpic:hover
{
    width: 200px;
    height: 200px;
    position:absolute;
    z-index: 50;
    background-color:blue;
}
.margin {
    margin-top:48px;
}