悬浮上去有效果的照片墙

<style>
.all {
width: 800px;
height: 933px;
margin:0 auto;
border-radius:10px;
margin-top:10px;
position:relative;
overflow:hidden;
}

.all img {
position:absolute;
top:0;
transition:0.5s;
border:5px solid;
}
.this img:hover {
background: rgba(0,0,0,0.5);
transform:translate(700px);
}

</style>

 

此处的照片可自行选择 改成你本地的图片路径即可 

<div class="all">
<div class="this"><img src="img/3.jpeg" style="left: 0px;" /></div>
<div class="this"><img src="img/2.jpeg"/ style="left:150px;"></div>
<div class="this"><img src="img/1.jpeg"/ style="left:300px;"></div>
</div>