.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; }
当你鼠标以上图片时会有一个悬空的效果