Как сделать при:hover на одном div второй плавно появлялся справа?

html код

<div  id="portrait-wrap"></div>
<div  id="portrait-wrap2"><img src="../img/5.jpg"  /></div>

css

#portrait-wrap {
position: relative;
top: 500px;
width: 90px;
height: 90px;
border-radius: 10px;
background: #000;
}
#portrait-wrap2 {
  text-align: center;
  display: none; 
}
#portrait-wrap:hover + #portrait-wrap2 {
    display: block; 
}

сайт на котором код
сайт пример как должно появляться при наведении на героев