<div id="wrap">
  <a href="#">扫一扫我的二维码</a>
  <div id="pic">
    <img src="http://www.mrszhao.com/zb_users/theme/mrszhao/style/images/wx.png">
  </div>
</div>
body{
  font:1em "microsoft Yahei";
}
a{
  color:#333;
  text-decoration:none;  
}
#wrap{
  width:246px;
  text-align:center;
  margin:0 auto;
  position:relative; 
}
#wrap a{
  display:block;
  padding:10px 0;
  background:rgba(98,200,165,1);
  transition:.2s;
}
#wrap a:hover{
  background:rgba(98,200,165,.85);
}
#pic{
  position:absolute;
  transition:0.3s cubic-bezier(.8,.01,.35,1);
  visibility:hidden;
  opacity:0;
  transform:scale(.5);
}
#wrap a:hover+#pic{  /*使用+选择器,可以选择紧邻的下面的一个兄弟元素*/
  visibility:visible;
  opacity:1;
  transform:scale(1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.