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效果
时间： 2024-10-27 02:06:44