HTML code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "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> <Divclass= "box"> <I>1</I> <imgsrc= "Http://pic.2265.com/upload/2017-3/2017331931498082.png" /> </Div></Body></HTML>
:
Hover effect
CSS3 Hover Effect