<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box{ height:128px; width: 128px; position: relative; overflow: hidden; } .box .pic{ height:128px; width: 128px; position: relative; background: url("../images/avatar.png"); } .box .pic_info{ width: 128px; height:64px; top: 128px; color: #ffffff; background-color: rgba(0,0,0,0.5); position: absolute; left: 0px; transition: all 500ms ease; } .box .pic_info p{ margin: 20px; line-height: 20px; } .box:hover .pic_info{ top:64px; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; } </style></head><body> <div class="box"> <div class="pic"></div> <div class="pic_info"> <p> This the info of the picture above This the info of the picture above This the info of the picture above This the info of the picture above </p> </div> </div></body></html>
when you move your mouse on to the picture,the information of the picture will pop from the bottom.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
