纯CSS图片缩放后显示详细信息

哎~！突然好久没更新博客了，最近总在下雨，晚上也经常没有时间来管理博客（目前在敲自己的一个平台，晢时还在写逻辑层的代码），好吧！废话不多说了，言归正传。

现在很多图片缩放的特效大多数都是用javascript来写的，当然了，其实还可以使用CSS来写。下边图片是效果触发前和触发后的图片。

　　

（触发前）

（触发后）

实现原理很简单，先看HTML代码：

 <div class="view view-first">
     <a target="_blank" href="#" class="new-product-image"><img src="data:images/china.jpg"></a>
     <div class="mask">
         <h4 class="title"><a title="中国茶城" class="text-hide" target="_blank" href="#">中国茶城</a></h4>
         <p class="text">云南普洱，2003年5月普洱被中国茶叶流通协会命名为“中国茶城”，普洱茶成为普洱走向全国乃至世界的一张标志性名片。</p>
     </div>
 </div>

另外是CSS：

.view-first{position:relative;}
.view-first img{-webkit-transition:all .2s ease-in; -moz-transition:all .2s ease-in; -o-transition:all .2s ease-in; -ms-transition:all .2s ease-in; transition:all .2s ease-in;}
div.mask-hover img, .view:hover img{width:100px; height:100px;}
.view{position:relative; text-align:center; cursor:default; width:190px; height:238px; margin-left:auto; margin-right:auto; overflow:hidden;}
.view .mask{width:160px; overflow:hidden; margin:0 auto;}
.view .title{text-align:center; position:relative; font-size:12px; margin-top:16px; height:20px; line-height:20px;}
.view .title a{ color:#666; text-decoration:none;}
.view .text{position:relative; text-align:left; font:normal 12px/16px '宋体'; color:#999;}

好了！这样就大功造成了！但是因为高度值是固定值的，如果用在实际项目中可能会引起一些问题，不过这也算是使用纯CSS编写的缺点，如果能有更好的解决方案！我相信目前只能用jQuery或者Javascript来写，当然了，现在CSS3已经强大到可以做动画了（国外听说已经有牛人使用纯CSS3做了个动画）。好了，休息了！