求大佬指点本站的头像信息栏的效果是怎么实现的？

当鼠标移动到头像时，头像会变大但对其周围的元素不会有影响，并且弹出隐藏的信息栏。并且鼠标如果一直停留在头像或者信息栏上，信息栏就一直在显示状态。部分原理我懂，但关键点我不明白。第一头像框变大l是怎么向下移动一点位置的？第二头像框变大后是怎么刚好和信息栏搭成组合的。

以下是我的代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           #box{
               width: 100px;
               height: 100px;
               border-radius: 50%;
               border: 1px solid red;
               margin: auto;
               overflow:hidden;
           }
           #box1{
               width: 300px;
               height: 500px;
               border: 1px solid red;
               margin: auto;
               position: relative;
               top: -50px;
           }
       </style>
   </head>
   <body>
       <div style="width: 1000px; height: 1000px;">
       <div id="box"><img src="tup.jpg" width="100%" height="100%"></div>
       <div id="box1" style="text-align:center; font-size: 40px;padding-top:40px;box-sizing: border-box; ">信息栏</div>
       </div>
   </body>
</html>

代码效果图

我想要实现的效果图

你不一定要放大啊,鼠标放上去的时候把小头像隐藏,然后显示出弹框,你把弹框那里单独做一个大的头像和信息栏连在一起

css过渡动画了解一下

他是做了俩，放上去之后大的盖着小的了吧，小的不用动