我如何使用图像制作像这个网站的图像边框动画

Question

我想做这样的事情：http://kizi.com/

就像在这个网站上，当你将鼠标悬停在游戏图标上时，会弹出一个带背景的文字，我也喜欢边框动画。

#games img {
  width: 110px;
  height: 100px;
  margin: 50px;
  border: 2px solid #ffd700;
  border-radius: 15px;
}

#games img:hover {
  border: 2px solid #fff;
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}

<div id="Games">
  <a href="#">
    <img src="http://via.placeholder.com/110x100" />
  </a>
</div>