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效果
