div的溢出和隐藏加动画出现鼠标滑动效果

  1 <!doctype html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8">
  5 <title>无标题文档</title>
  6 <style>
  7 /*让图片把包含图片和文字的div占满，让文字div溢出隐藏*/
  8 #mm{
  9     width:1270px;   /*调节宽度让他居中*/
 10     overflow:hidden;  /*他的子div把这个div撑开*/
 11     margin:0 auto;
 12     }
 13 .pro img{
 14     width:100%;   /*让这个图片的宽高占他父div的宽高和父div的宽高一样*/
 15     height:100%;
 16     display:block;/*让这个图片成为盒子模型成为一个div*/
 17 }
 18 .pro{
 19     border:1px dashed #B8B4B4;
 20     width:300px;/*设置大div的宽高*/
 21     height:150px;
 22     padding:2px;/*让图片和他的父div中间有空隙*/
 23     overflow:hidden;/*隐藏溢出的文字div*/
 24     float:left;/*让这个div左对齐*/
 25     margin:5px;/*让这个div四周都有5px空隙*/
 26 }
 27 div.pro div{
 28     position:relative;/*相对定位div移走后还占有原来的位置*/
 29     width:300px;/*设置文字div的宽度和高度宽度要和pro父div的一样宽*/
 30     height:50px;
 31 
 32     -webkit-transition:all 0.2s ease-in 0;/*动画效果*/
 33     background-image:linear-gradient(rgba(0,0,0,0.06),#000);/*背景渐变效果*/
 34     bottom:-2px;/* 让隐藏的文字div下移动让文字div距离他的父div的底部有2px的缝隙因为图片都有2px的间隙，为了让他从图片底部出现，所以要写尽量比图片的间隔稍微大一点点*/
 35 }
 36 div.pro:hover div{
 37     bottom:50px;/*鼠标滑过让文字div距离父div底部向上有50px的缝隙*/
 38 }
 39 </style>
 40 </head>
 41 <body>
 42 <div id="mm">
 43 <div class="pro">
 44 <img src="images/img2.jpg">
 45 <div>产品中心下载</div>
 46 </div>
 47 <div class="pro">
 48 <img src="images/img2.jpg">
 49 <div>产品中心下载</div>
 50 </div>
 51 <div class="pro">
 52 <img src="images/img2.jpg">
 53 <div>产品中心下载</div>
 54 </div>
 55 <div class="pro">
 56 <img src="images/img2.jpg">
 57 <div>产品中心下载</div>
 58 </div>
 59 <div class="pro">
 60 <img src="images/img2.jpg">
 61 <div>产品中心下载</div>
 62 </div>
 63 <div class="pro">
 64 <img src="images/img2.jpg">
 65 <div>产品中心下载</div>
 66 </div>
 67 
 68 <div class="pro">
 69 <img src="images/img2.jpg">
 70 <div>产品中心下载</div>
 71 </div>
 72 <div class="pro">
 73 <img src="images/img2.jpg">
 74 <div>产品中心下载</div>
 75 </div>
 76 <div class="pro">
 77 <img src="images/img2.jpg">
 78 <div>产品中心下载</div>
 79 </div>
 80 <div class="pro">
 81 <img src="images/img2.jpg">
 82 <div>产品中心下载</div>
 83 </div>
 84 <div class="pro">
 85 <img src="images/img2.jpg">
 86 <div>产品中心下载</div>
 87 </div>
 88 <div class="pro">
 89 <img src="images/img2.jpg">
 90 <div>产品中心下载</div>
 91 </div>
 92 <div class="pro">
 93 <img src="images/img2.jpg">
 94 <div>产品中心下载</div>
 95 </div>
 96 <div class="pro">
 97 <img src="images/img2.jpg">
 98 <div>产品中心下载</div>
 99 </div>
100 <div class="pro">
101 <img src="images/img2.jpg">
102 <div>产品中心下载</div>
103 </div>
104 
105 
106 </div>
107 
108 </body>
109 </html>