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>