Html
    Css
    Js

    
                        
 * {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body {
	font:14px/1 Lato,sans-serif;
	color:#555;
	background:#eee;
}
.gallery {
	width:790px;
	margin:30px auto;
	padding:5px;
	background:#333;
}
.gallery > div {
	position:relative;
	float:left;
	padding:5px;
}
.gallery > div > img {
	width:250px;
	transition:.1s transform;
	transform:translateZ(0);
}
.gallery > div:hover {
	z-index:1;
}
.gallery > div:hover > img {
	transform:scale(1.5,1.5);
	transition:.3s transform;border: 1px solid rgba(236,236,236,1.00); 
}
.cf:before,.cf:after {
	display:table;
	content:"";
	line-height:0;
}
.cf:after {
	clear:both;
}
h1 {
	margin:40px 0;
	font-size:24px;
	text-align:center;
	text-transform:uppercase;
}
footer {
	margin:80px 0;
	text-align:center;
}

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

鼠标悬停图片特效

写了在html里面鼠标移动,图片会有浮动的动画

0