Html
    Css
    Js

    
                        
.figcaption {
	width:277px;
	height:290px;
	background:url("http://www.jq22.com/img/cs/500x500b.png") no-repeat;
	background-size:100% 100%;
	position:relative;
	overflow:hidden;
}
.figcaption:hover img {
	transform:scale(3,3);
	opacity:0;
	transition:all 0.5s ease-in-out;
}
.figcaption:hover .more {
	transform:scale(1,1) rotate(0deg);
	opacity:1;
	transition:all 0.5s ease-in-out;
}
.more {
	background:skyblue;
	width:60px;
	height:40px;
	text-align:center;
	line-height:40px;
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-30px;
	margin-top:-20px;
	transition:0.3s ease-in-out;
	transform-origin:50% 50%;
	transform:scale(0,0) rotate(-45deg);

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

图片炫酷缩放

0