1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 .box{ 8 width: 200px; 9 height: 300px;10 margin: 50px auto 0;11 position: relative;12 13 overflow: hidden;14 }15 16 .box2{17 width: 200px;18 height:120px;19 background-color:rgba(0,0,0,0.3);20 position: absolute;21 top: 300px;22 transition:all 1s ease 1s ;23 }24 25 .box2 h3{26 font-size: 14px;27 line-height: 100px;28 text-align: center;29 margin: 0;30 color: #fff;31 }32 33 .box:hover .box2{34 top: 180px;35 }36 </style>37 </head>38 <body>39 <div class="box">40 <img src="banner01.jpg" alt="图片">41 <div class="box2">42 <h3>文字说明的标题</h3>43 </div>44 </div>45 </body>46 </html>
