Html
    Css
    Js

    
                        
.login-box {
	width:600px
       margin:0 auto;
}
.login-box li {
	float:left;
	margin-right:15px;
	position:relative;
	cursor:pointer;
	list-style:none;
}
.weibo {
	position:absolute;
	width:150px;
	height:150px;
	background:#fff;
	right:-65px;
	z-index:10;
	cursor:pointer;
	-moz-transform:rotateY(270deg);
	-ms-transform:rotateY(270deg);
	-o-transform:rotateY(270deg);
	-webkit-transform:rotateY(270deg);
	transform:rotateY(270deg);
	-moz-transition:all 0.3s ease-in-out 0s;
	-webkit-transition:all 0.3s ease-in-out 0s;
	transition:all 0.3s ease-in-out 0s;
}
.weibo-list:hover .weibo {
	-moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	-o-transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
.weibo img,.weixin img {
	width:100%;
	height:auto;
	display:block;
}
.weibo:after {
	content:"";
	position:absolute;
	border-width:6px;
	border-style:dashed dashed dashed solid;
	border-color:transparent transparent red transparent;
	display:block;
	right:68px;
	top:-11px;
}
.weixin {
	position:absolute;
	width:150px;
	height:150px;
	background:#fff;
	right:-65px;
	z-index:10;
	cursor:pointer;
	-moz-transform:rotateY(270deg);
	-ms-transform:rotateY(270deg);
	-o-transform:rotateY(270deg);
	-webkit-transform:rotateY(270deg);
	transform:rotateY(270deg);
	-moz-transition:all 0.3s ease-in-out 0s;
	-webkit-transition:all 0.3s ease-in-out 0s;
	transition:all 0.3s ease-in-out 0s;
}
.weixin-list:hover .weixin {
	-moz-transform:rotateY(0deg);
	-ms-transform:rotateY(0deg);
	-o-transform:rotateY(0deg);
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
.weixin:after {
	content:"";
	position:absolute;
	border-width:6px;
	border-style:dashed dashed dashed solid;
	border-color:transparent  transparent red transparent;
	display:block;
	right:68px;
	top:-11px;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

hover二维码展示特效

<img src="http://www.jq22.com/img/cs/500x500-1.png">

换成二维码的图片

0