简单技巧,不废话看效果
贴代码
HTML
<div class="main01 main011"><a href="#"><img src="test.png"/></a></div>
css
.main01{
position: absolute;
width: 260px;height: 160px;
top: 50%;margin-top: -120px;
border-radius:5px ;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
transition: all .1s ease;outline: none;
}
.main01 img{
border-radius: 5px;
width: 100%;
}
.main01:hover img{
transform: scale(1.05);
-ms-transform: scale(1.05);
overflow: hidden;
}
.main011{
margin-left: 105px;background-color: #28B779;
box-shadow: 0px 16px 0px rgba(31, 152, 98, 1), 0px 9px 25px rgba(0, 0, 0, .8);
}
.main011:hover{
background-color: #4D4D4D\0/;margin-top: -110px;
box-shadow: 0px 2px 0px rgba(31, 152, 98, 1), 0px 3px 6px rgba(0, 0, 0, 1);
}