<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; 
  visibility:hidden;
  opacity:0;
  transform:scale(.5);
  transition:0.3s cubic-bezier(.8,.01,.35,1);
}
#pic.ease{
  visibility:visible;
  opacity:1;
  transform:scale(1);
}
window.onload=function(){
  var oLink=document.getElementsByTagName("a")[0];
  var oPic=document.getElementById("pic");
  var timer=null;
  oLink.onmouseover=function(){
    oPic.className="ease";
    
  }
  oLink.onmouseout=function(){
    
    timer=setTimeout(function(){
       oPic.className="";
      
    },500)
   
    
  }
  
  oPic.onmouseover=function(){
    
    clearTimeout(timer);
    
  }
  oPic.onmouseout=function(){
    
     oPic.className="";
    
  }
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.