html代码：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} a {
text-decoration: none;
color: #333;
} .box {
width: 55px;
height: 55px;
overflow: hidden;
display: block;
} .box img {
width: 55px;
height: 55px;
display: block;
border-radius: 5px;
float: left;
} .box i {
width: 55px;
height: 55px;
display: block;
text-align: center;
color: #888;
font-size: 20px;
line-height: 55px;
transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
-o-transition: all .3s linear;
-ms-transition: all .3s linear;
font: normal 24px/55px Arial, Helvetica, sans-serif;
background-color: #3F6F12;
} .box:hover i {
height: 0;
line-height: 150px;
}
</style>
</head> <body>
<div class="box">
<i>1</i>
<img src="http://pic.2265.com/upload/2017-3/2017331931498082.png" />
</div>
</body> </html>
效果图：
hover效果
