鼠标经过超链接显示图片二维码

在需要出现的位置加入

<a class="social weixin" href="javascript:">
<img class="qrcode" src="图片链接" alt="文字描述">
此处需要显示的文字 比如 微信二维码</a>

CSS 样式表内追加

.weixin {
    position: relative;
}

.weixin img.qrcode {
    position: absolute;
    z-index: 99;
    top: -135px;
    right: -28px;
    width: 7.5rem;
    max-width: none;
    height: 7.5rem;
    transform: scale(0);
    transform-origin: top right;
    opacity: 0;
    border: .1rem solid #0085ba;
    border-radius: .25rem;
    -webkit-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}  

.weixin:hover img.qrcode {
    transform: scale(1);
    opacity: 1;
}