Html
    Css
    Js

    
                        
.container {
	height:400px;
	width:20%;
	box-sizing:border-box;
	border:solid #989898 1px;
	margin-top:100px;
	float:left;
	transition:0.5s;
	/* position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	*/
}
.container:hover {
	margin-top:80px;
	transition:0.5s;
	box-shadow:-10px 0 10px #989898,/*左边阴影*/          
            10px 0 10px #989898,/*右边阴影*/   
          0 10px 10px #989898;
	/*底边阴影*/ 
          cursor:pointer;
}
.container img {
	height:320px;
	width:100%;
}
.content1 {
	font-size:24px;
	text-align:center;
}
.content2 {
	margin-top:5px;
	font-size:16px;
	text-align:center;
	color:#989898;
}

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

css图片浏览(原创)

当你鼠标以上图片时会有一个悬空的效果

0