JSFiddle - React, Tailwind, and code Playground

HTML

<div id="portrait-wrap" class="hov"></div>
<div id="portrait-wrap" class="hov"></div>
<div id="portrait-wrap" class="hov"></div>
<div id="portrait-wrap" class="hov"></div>
<div id="portrait-wrap" class="hov"></div>
<div id="portrait-wrap" class="hov"></div>
<div id="portrait-wrap" class="hov"></div>
<div id="portrait-wrap" class="hov"></div>
<div id="portrait-wrap" class="hov"></div>
<div id="portrait-wrap" class="hov"></div>
<div id="portrait-wrap2"></div>

CSS

#portrait-wrap {
position: relative;
top: 200px;
width: 90px;
height: 90px;
border-radius: 10px;
background: #000;
float:left;
margin: 0 10px 10px 0;
}

#portrait-wrap2 {
  top: 50px;
  display: none; 
  background: #000;
  width: 100px;
  height: 100px;
  position: absolute;
}

#portrait-wrap a {
    color: #000000;
}
#portrait-wrap a:hover {
    text-decoration: none;
}

#portrait-wrap2 {display:none; color: #FFF;}

JavaScript

$('.hov').hover(function(){
        $('#portrait-wrap2').stop().animate({left:200, opacity:"show"}, 300 ).css("background-color", getRandomColor);})
    .mouseout(function(){
        $('#portrait-wrap2').stop().animate({left:10, opacity:"show"}, 300 ).fadeOut(100).css("background-color", fof);});

function getRandomColor() {
    return "#"+((1<<24)*Math.random()|0).toString(16);
}